html – 显示的奇怪边距问题：内联块子

概述Heres the fiddle 当我将#two设置为内联块时,它会从< p>中减去16 px的上/下边距.并将其添加到divs内容框高度,因此它变为52px而不是20px ..为什么会这样？ 你所看到的是 margin collapsing.的一个陌生案例 如果父元素和子元素是块元素,并且没有任何东西(填充,边框等)将它们的垂直边距分开,那么这些边距将会崩溃.折叠边距是指未添加两个相邻边距(如您 Heres the fiddle

当我将#two设置为内联块时,它会从< p>中减去16 px的上/下边距.并将其添加到divs内容框高度,因此它变为52px而不是20px ..为什么会这样？

解决方法 你所看到的是 margin collapsing.的一个陌生案例

如果父元素和子元素是块元素,并且没有任何东西(填充,边框等)将它们的垂直边距分开,那么这些边距将会崩溃.折叠边距是指未添加两个相邻边距(如您所料),而是显示两者中较大的边距.在父子案例中,折叠的保证金最终在父母之外.您可以在上述链接的“父级”和“第一个/最后一个孩子”部分下阅读更多详细信息.

将父级设置为内联块或浮动：左;它或其他一些东西(请参阅链接以获得更完整的列表)将阻止边距折叠.这会导致我们习惯的行为：孩子的边距将出现在父母的内部,增加其总高度,并且还会显示父母的边距.

总结

以上是内存溢出为你收集整理的html – 显示的奇怪边距问题：内联块子全部内容，希望文章能够帮你解决html – 显示的奇怪边距问题：内联块子所遇到的程序开发问题。

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