问题:
具有display: inline-block;的元素将具有与具有display: block;的元素不同的边距，即使将两者的边距设置为例如margin-top: 30px; !
margin-top将适用于带有inline-block的元素，但与带有block的元素不完全相同。会有一些像素的差异。为什么?
我想你指的是内联块元素的页边距不会折叠，但在块元素上它们会折叠。Box模型页很好地说明了这一点。
那么什么是缩边距呢?假设你有一个底部边距为10px的元素，然后是顶部边距为5px的元素。两者之间的边距不会是15，而是会缩至最大(10px)。
如果元素标签相邻且没有空格，则默认在它们之间有填充(空格的大小，因此宽度为1em):
<element></element><element></element>
可以，但下面的不行:
<element></element>
<element></element>
block没有这个问题，这就是为什么它看起来不同的原因。它使用inline
将默认值添加到填充中。为了克服这个问题，您可以将父 font-size设置为0，或者从所需的宽度中减去额外的填充宽度。