CSS-边距顶部不起作用答案

【问题标题】：CSS- margin-top not workingCSS-边距顶部不起作用
【发布时间】：2016-12-06 08:54:01
【问题描述】：

#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>

当我运行 then 时，margin-top 不起作用。 div category_main 与它所在的 div 一起下降。我不想要那个白色的部分。而不是，只有那个红色边框的框应该受到margin-top 的影响。

谢谢。

任何帮助将不胜感激。

【问题讨论】：

Why does this CSS margin-top style not work?的可能重复

标签： twitter-bootstrap css margin

【解决方案1】：

不应将margin-top 应用于#category_main，而应将padding-top 应用于#modal，因为前者会留下空白，但后者包含相同的内容：

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

查看演示here

【讨论】：

【解决方案2】：

我认为你的做法是错误的。您想在外部 div 上放置填充。

 padding-top: 5%;

【讨论】：

【解决方案3】：

将overflow:hidden 添加到父级，以便父级获得您指定的真实高度..

这里是 sn-p

#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 中 cmets 应该在 /*.......*/ this 之间传递，而不是 //....

【讨论】：

【解决方案4】：

将此css用于#modal，

垂直对齐：中间；

显示：表格单元格；

#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>

【讨论】：

【解决方案5】：

真的，如果你不想要你想要的空白，只需将 padding:5% 添加到主 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>

#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>

【讨论】：