Question

据我所知，CSS Box模型不会使用background-color为元素的边距着色，因为边距位于元素之外。但是，为什么容器元素的background-color颜色不在包含元素的边缘后面？它不应该填满它的所有空间，无论它包含什么（以及这些元素是否有边距）？

考虑以下

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      background-color: #ddd;
    }
    #container {
      margin: 0 auto;
      width: 400px;
    }
    .contained {
      margin: 0;
      background-color: #a3ddef;
    }
    .contained p {
      padding: 20px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="contained">
      <p>Some text is here.</p>
    </div>
    <div class="contained">
      <p>Some text in here too.</p>
    </div>
  </div>
</body>

</html>

我希望background-color元素的.contained能够垂直对接。此外，如果您向border添加宽度为1px的.contained，则元素的background-color会展开以填充空间。

这里发生了什么？

Here's a jsfiddle for it

Answer 1

不确定问题究竟是什么，但是如果您尝试堆叠.contained元素以使它们之间没有灰色空格，则必须删除<p>标记上的边距：

p {margin:0}

这是一种称为保证金崩溃的现象。这是一种怪癖，其中2个边缘接触重叠。不是获得两个边距的总和，而是使用更大的边距。在您的情况下，<p>标记边距触及<div>标记的边距（即使它们是0px），因此边距溢出div标记。

如果出于某种原因，您仍需要<p>代码上的保证金，请将<p>代码设置为p {display:inline-block;}，因为内联元素不受此影响。

请参阅此链接以获取更多信息：

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

为什么容器元素的背景颜色填充不包含元素的边距？

1 个答案: