Question

我居中的标题底部边距溢出了父容器，导致黄色和橙色包装器之间出现间隙：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
    <style>
    .header-wrap{
      background-color:yellow;
    }
    .content-wrap{
      background-color:orange;
    }
    .header{
      margin:0 auto 1em auto;
      background-color: red;
      width:40em;
    }
  </style>
</head>
<body>
  <div class="header-wrap">
    <div class="header">header</div>
  </div>
  <div class="content-wrap">
    <div class="content">content</div>
  </div>
</body>
</html>

如果我为父.header-wrap{overflow:hidden;}使用简单的clearfix，问题就解决了，但我不明白为什么我需要在这里使用clearfix，因为我根本不使用浮动元素

据我所知，clearfix应用于父级以清除里面任何浮动的子级，这不是这种情况。

任何人都可以解释为什么会这样吗？

Answer 1

.header{
      margin:0 auto 1em auto; //margin 1em at bottom
      background-color: red;
      width:40em;
}

将其更改为

.header{
      margin:0 auto;
      background-color: red;
      width:40em;
}

DEMO

Answer 2

将float：left或inline-block添加到标题中。目前在您的结构中，您提到了header-bottom类中的margin-bottom到header div。 header是子元素。要显示黄色背景，您必须包装子元素。

<强> DEMO

<强> CSS

.header-wrap {
    background-color: #FFFF00;
    display: inline-block; 
}

居中的底部边缘溢出父母

2 个答案: