html – 在DIV中具有边距的子元素

概述我需要两个连续的div(有背景)无缝触摸，一个在另一个之外。然而，当我把一个小孩p元素放入底部div时，这种布局就会中断。 p元素的边距强制两个div之间的空白间隙。这是奇怪的行为，因为我期待p的边缘留在div的内容和背景区域。它在Firefox，Chrome和IE 8上也是一样的。 <div style="background: #ccccff">Top Div</div><div style 我需要两个连续的div(有背景)无缝触摸，一个在另一个之外。然而，当我把一个小孩p元素放入底部div时，这种布局就会中断。 p元素的边距强制两个div之间的空白间隙。这是奇怪的行为，因为我期待p的边缘留在div的内容和背景区域。它在firefox，Chrome和IE 8上也是一样的。

<div >top div</div><div ><p>Bottom div</p></div>

这是它的样子。

我可以通过将p元素的边距更改为paddings来解决这个问题，但是我还需要使用头元素，列表元素以及我在div开头使用的任何其他元素。这是不可取的。

有人可以启发我：我错过了盒子模型的注意事项吗？有没有一个简单的方法来解决这个问题，最好是修改div的风格？

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

* div和p的边缘“组合形成一个单一的边际”，尽管它们是嵌套的，因为它们之间具有相邻的边距，没有填充或边界。

总结

以上是内存溢出为你收集整理的html – 在DIV中具有边距的子元素全部内容，希望文章能够帮你解决html – 在DIV中具有边距的子元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。