html - 为什么这些内联 block div 元素之间存在无法解释的间隙？

Question

<分区>

Answer 1

在这种情况下，您的 div 元素已从 block 级别元素更改为 inline 元素。 内联 元素的一个典型特征是它们尊重标记中的空白。这解释了为什么元素之间会产生间隙 空间。 (example)

有一些解决方案可以用来解决这个问题。

方法 1 - 从标记中删除空格

示例 1 - 将空格注释掉:(example)

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

示例 2 - 删除换行符:(example)

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

示例 3 - 在下一行关闭部分标记 (example)

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

示例 4 - 在下一行关闭整个标签:(example)

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

方法 2 - 重置字体大小

由于 inline 元素之间的空白由 font-size 决定，您可以简单地将 font-size 重置为 0，从而去掉元素之间的空格。

只需在父元素上设置font-size: 0，然后为子元素声明一个新的font-size。这有效，如此处所示 (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

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

方法三——设置父元素为display: flex

在某些情况下，您还可以将父元素的display设置为flex。 (example)

这有效地删除了 supported browsers 中元素之间的空格.不要忘记添加适当的供应商前缀以获得额外支持。

.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 元素之间的空间是非常不可靠的。如果有其他更优的解决方案，请不要使用负边距。