DIV 内有边距的子元素

Posted 2023-03-06

【中文标题】DIV 内有边距的子元素

【英文标题】：Child elements with margins within DIVs

【发布时间】：2010-12-25 03:21:33

【问题描述】：

我需要两个连续的div 元素（带背景）才能无缝接触，一个在另一个之下。但是，当我将子 p 元素放入底部 div 时，这种布局会中断。 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 元素的边距更改为填充来解决此问题，但是我还必须对标题元素、列表元素以及我想在 @ 开头使用的任何其他元素执行此操作987654331@。这是不可取的。

有人可以启发我：我缺少盒子模型的什么警告？有没有简单的方法来解决这个问题，最好是修改div的样式？

【参考方案1】：

解决方案 1

将 overflow: hidden/auto 添加到包含的 div 以防止边距折叠。

解决方案 2

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

新解决方案

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

【讨论】：

在 Chrome 上 0.01px 对我来说最密集的工作，但 0.1px 可以。我可以看到这个解决方案对使用溢出的吸引力，但是有没有人在跨浏览器上广泛测试过它？

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

【参考方案2】：

那是expected behavior*。有几种方法可以绕过它。如果浮动 div，它们将包含子元素的边距并防止边距折叠。另一种方法是为 div 添加边框或填充。

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

【讨论】：

是的，这看起来像是在折叠边框。不过我还是觉得有点奇怪。感谢您的提醒。

浏览器中的预期行为往往出乎意料

【参考方案3】：

在div 元素上设置正填充和相应的负边距似乎可以解决问题，但我不知道为什么。

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

【参考方案4】：

将overflow: hidden 或overflow: auto 添加到div

【讨论】：

当父级有另一个下拉 div 时不起作用，就像我的情况一样（