Question

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

当我跑的时候，margin-top不起作用。 div category_main已经降低了它所呈现的div。我不想要那个白色的部分。而不是只有那个红色边框应该受到margin-top的影响。

谢谢。

任何帮助都会感激不尽。

Answer 1

你应该将padding-top应用于#modal，而不是将margin-top应用于#modal，因为前者留下了一个空隙，但后者包括相同的： #modal { background-color：＃f0f0f0; //边框：薄红色实心; 身高：500px; padding-top：5％; } 请在此处查看演示

Answer 2

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

以下是代码段

＆＃13;

#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%;
            }

＆＃13;

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

＆＃13;

注意

在css中，评论应该在/*.......*/之间传递，而不是//....

Answer 3

我认为你有这个错误的方法。你想在外部div上加填充。

 padding-top: 5%;

Answer 4

将此css用于#modal，

垂直对齐：中部;

display：table-cell;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 5

真的如果你不想要你想要的白色空间，只需添加填充：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>

CSS-margin-top无效

5 个答案: