具有DIV内边距的子元素

2018-07-01 11:24:46

我需要连续两个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元素来解决这个问题，但是我还必须使用头元素，列表元素和我想在div开头使用的任何其他元素来做到这一点。这是不可取的。

有人能够启发我：我错过了什么样的箱子模型？有没有简单的方法来解决这个问题，最好通过修改div的风格？

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

* div和p的边距“结合形成单个边距”，即使它们是嵌套的，因为它们具有相邻的边界，而没有填充或边界。

添加overflow: hidden或overflow: auto到div

解决方案1

将溢出：隐藏/自动添加到包含div以防止边距崩溃。

解决方案2

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

新解决方案

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

链接地址: http://www.djcxy.com/p/87769.html

上一篇: Child elements with margins within DIVs

下一篇: When I try to shift the image upwards using negative margin the whole container is moved upwards