CSS-边距不工作

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 5%; 
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

当我再运行，边距不工作。 div category_main已经下了它提交的div。我不想要那个白色的部分。而不是，只有那个红色边框应该受到margin-top的影响。

谢谢。

任何帮助将不胜感激。

来源

2016-08-01 Bhavin Shah

的可能的复制（HTTP [为什么这个CSS的margin-top风格不行？]：/ /stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work） – Vucko

，你应该申请padding-top到#modal，因为前者留下的空隙，而后者包括相同：

#modal{ 
    background-color: #f0f0f0; 
    //border: thin red solid; 
    height: 500px; 
    padding-top: 5%; 
}

看演示here

来源

2016-08-01 10:13:38 Shashank

添加overflow:hidden父让家长获得指定了其真正的高度..

这里是片段

#modal{ 
 
     background-color: #f0f0f0; 
 
     /*border: thin red solid;*/ 
 
     height: 500px; 
 
     overflow:hidden; 
 
} 
 

 
    #category_main{ 
 
       width: 75%; 
 
       height:200px; 
 
       border: thin red solid; 
 
       margin: 0 auto; 
 
       margin-top: 15%; 
 
      }

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

注意

在CSS评论应该/*.......*/这间代替将margin-top到#category_main的传递中，不//....

来源

2016-08-01 10:10:56

我想你有这个错误的方法。你想填充外部div。

padding-top: 5%;

来源

2016-08-01 10:14:07

这是保证金的工作原理。您可以在这里阅读更多信息：https://www.w3.org/TR/CSS2/box.html

要解决这个问题，您可以像其他答案一样告诉您使用填充。

您还可以添加overflow: auto父像这样：

#modal{ 
 
     background-color: #f0f0f0; 
 
     height: 500px; 
 
     overflow: auto; 
 
} 
 

 
    #category_main{ 
 
       width: 75%; 
 
       height:200px; 
 
       border: thin red solid; 
 
       margin: 0 auto; 
 
       margin-top: 15%; 
 
      }

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

来源

2016-08-01 10:27:38

使用这个CSS为#modal，

垂直对齐：中间;

display：table-cell;

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    width: 500px; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 5%; 
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

来源

2016-08-01 10:27:39

真的，如果ü不想你需求的白色空间，只需添加填充：5％到主分区..可B本将解决你的问题

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    padding: 5%; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    padding:5%; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 

 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

来源

2016-08-11 12:39:18

CSS-边距不工作

回答

相关问题