DIV中带有边距的子元素

Question

我需要两个连续的带背景的 div 元素无缝接触，一个在另一个下面。但是，当我在底部的 div 中放置一个子 p 元素时，这种布局就会破坏。 p 元素的边距强制在两个 div 元素之间形成一个空白间隙。这是奇怪的行为，因为我期望 p 的边距保持在 div 的内容和背景区域内。它在 Firefox、Chrome 和 IE 8 上呈现相同的方式。

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>

以下是它的外观。

我可以通过将p元素的边距改为填充来修复此问题，但那样我还必须对标题元素、列表元素和任何我想在

开头使用的其他元素进行相同的操作。这是不可取的。

有没有人可以启发我：我缺少哪个盒子模型的注意事项？是否有一种简单的方法来修复这个问题，最好是通过修改

的样式来实现？

- myffical

Answer 1

将 overflow: hidden 或 overflow: auto 添加到 div 元素中。

- K Prime

---

当父元素有另一个下拉菜单div时，就像在我的情况下一样，它无法正常工作。 - ruruskyi

Answer 2

这是预期的行为*。有几种方法可以解决它。如果您浮动div，它们将包含子元素的边距并防止边距折叠。另一种方法是向div添加边框或填充。

* div和p的边距“组合成单个边距”，即使它们嵌套，因为它们之间没有填充或边框的相邻边距。

- No Surprises

---

是的，那看起来像是边框合并。不过我还是觉得有点奇怪。感谢提醒。 - myffical

浏览器的预期行为常常出乎意料。 - Kevin Laity

Answer 3

解决方法 1

在包含的 div 上添加 overflow: hidden/auto，以防止边距折叠。

解决方法 2

为包含的 div 添加正填充，并将相等的负边距添加到内部元素。

新解决方案

在包含的 div 上添加 0.01px 的填充，这将防止边距折叠，但不需要在内部元素上添加任何负边距。

- Oisin Lavery

---

在Chrome中，0.01像素的最密集工作适合我，但是0.1像素的却可以。我能理解这种解决方案比使用溢出更有吸引力，但是否有人在跨浏览器方面进行了广泛测试呢？ - Evanss

对于Chrome使用：padding-top: 0.02px; - Giacomo Paita

Answer 4

设置正的内边距，并在 div 元素上设置相应的负外边距似乎可以解决问题，尽管我不知道原因。

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>

- Alan Haggai Alavi