具有DIV内边距的子元素
我需要连续两个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