为什么这些内联块div元素之间存在无法解释的差距？

Question

我有两个相同的内联块div元素，彼此相邻放置。但是，尽管将边距设置为0，但两个div 之间似乎仍有4像素的神秘空间。没有父div会影响它们-怎么回事？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Answer 1

在这种情况下，您的div元素已从block关卡元素更改为inline元素。inline元素的典型特征是它们尊重标记中的空白。这就解释了为什么 元素之间会产生间隙
。
（例）

有一些解决方案可用于解决此问题。

方法1-从标记中删除空格
示例1-将空白注释掉：（

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

示例2-删除换行符：（

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

示例3-在下一行关闭标签的一部分

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

示例4-在下一行关闭整个标签：（

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

方法2-重置 font-size
由于inline元素之间的空格是由决定的font- size，因此您可以简单地将重置font-size为0，从而删除
元素之间的空格。

只需font-size: 0在父元素上设置，然后font- size为子元素声明一个新元素。如本文所示，此方法有效

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

这种方法效果很好，因为它不需要更改标记。但是，如果font-size使用em单位声明了子元素，则无法使用。因此，我建议从标记中删除空格，或者选择浮动元素，从而避免元素产生的空间inline。

方法3-将父元素设置为 display: flex在某些情况下，您还可以display将父元素的设置为flex。

这样可以有效地删除受支持的浏览器中元素之间的空格。不要忘记添加适当的供应商前缀以获取其他支持。

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}



.parent {

    display: flex;

}

.parent > div {

    display: inline-block;

    padding: 1em;

    border: 2px solid #f00;

}


<div class="parent">

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

</div>

侧面注意事项：使用负边距消除元素之间的间隔是非常不可靠的inline。如果还有其他更好的解决方案，请不要使用负边距。