为什么边距适用于CSS中的内联块和块元素？

Question

问题：

display: inline-block;元素的边距与display: block;元素的边距不同，即使边距设置为例如margin-top: 30px;也是如此！

margin-top将应用于带有内联块的元素，但与带有块的元素不完全相同。会有一些不同的像素。为什么呢？

Answer 1

我认为你所指的是内联块元素的边距不会崩溃的事实，但是在块元素上它们会崩溃。 The Box model page goes over this really well

那么什么是崩溃边际？假设你的底部有一个10px边距的元素，后面是一个顶部有5px边距的元素。两者之间的差距不会是15，但会下降到两者中的最大值（10px）。

Answer 2

默认情况下，内联块在它们之间有一个填充（空格的大小，所以宽度为1em），如果元素标签没有放在彼此旁边没有空格：

<element></element><element></element>

没关系，但以下情况不会：

<element></element>
<element></element>

块没有这个问题，这就是它看起来不同的原因。它将默认值添加到带内联的填充。

要解决此问题，您可以将父级 font-size设置为0，或者从所需宽度中减去额外的填充宽度。