Question

在示例中http://jsfiddle.net/cq7fkkdx/1/：

<div style="background-color: #AAA;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div style="background-color: #EAA;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

它产生2个块，它们之间有空格。空间是第一个p-tag的结果。实际上我期望第一个div会更高，以覆盖段落的下边距，但它会产生下一段之前的空格。

如何告诉第一个div它的背景也应该覆盖内段的下边距？（两个div应该连接）

Answer 1

您可以在padding标记上使用margin代替<p>。这是一个例子：

p {
  margin: 0px 0px;
  padding: 1em 0em;
}

<div style="background-color: #AAA;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div style="background-color: #EAA;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<强> jsFiddle Demo

<强>更新

由于您不想从<p>移除边距，因此将overflow: hidden添加到包含<div>标记的<p>将解决此问题。

div {
  overflow: hidden;
}

<div style="background-color: #AAA;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div style="background-color: #EAA;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<强> jsFiddle Demo

如何用父元素的背景填充内部元素的边距产生的空白空间？

1 个答案: