显示器奇怪的边缘问题：inline-block孩子 [英] Strange margin issue with a display: inline-block child

问题描述

小费

当我将 #two 设置为inline-block，从< p> 中减去16像素的顶/并将其添加到divs内容框的高度，所以它变成52px而不是20px ..为什么是这种情况？

解决方案

您看到的是利润率崩溃的陌生人之一。 / p>

如果父元素和子元素是块元素，并且没有分隔它们的垂直边距的内容（填充，边框等），那么这些边距将会折叠。展开前边距是指未添加两个相邻边距（您可能会期望），而是显示较大的两个边距。在父子案例中，折叠的页边距结束于父代之外。

您可以在上述连结中的家长和第一个/最后一个子女部分阅读更多详细资讯。将父项设为 inline-block 或 float：left; 或其他一些东西（参考链接获取更完整的列表）停止边缘崩溃。这导致我们习惯的行为：孩子的边缘将出现在父母的内部，添加到它的总高度，父母的边缘也将被显示。

Heres the fiddle

When I set #two to inline-block it subtracts the 16 px of top/bottom margin from the <p> and adds it to the divs content box height so it becomes 52px instead of 20px .. why is this the case?

解决方案

What you're seeing is one of the stranger cases of margin collapsing.

If the parent and children are block elements and there's nothing (padding, a border, etc.) separating their vertical margins, then those margins will collapse. Collapsed margins are when two neighboring margins aren't added (as you might expect), but instead the larger of the two is displayed. In the parent-child case, the collapsed margin ends up outside the parent. You can read more details under the section Parent and first/last child in the above link.

Setting the parent to inline-block, or float:left;ing it or a number of other things (refer to the link for a more complete list) will stop the margins from collapsing. This leads to the behavior we're used to: the child's margin will appear inside the parent, adding to its total height, and the parent's margin will also be displayed.

这篇关于显示器奇怪的边缘问题：inline-block孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！