html - 为什么在这种情况下显示内联、内联 block 之间的差异？

Question

在这段代码中，div 的高度是一个行高。如果第二个 span 的显示是 inline-block，则 div 的高度是双行高。

<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline; background: #ff3d00;"></span>
</div>
<hr />
<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline-block; background: #ff3d00;"></span>
</div>

我怎样才能使它只显示一个行高？

Answer 1

您可以将 font-size:0 添加到父 div，然后为子元素添加所需的 font-size。它的发生是因为行内 block 元素之间有空格。

<div style="border:1px solid #00b0ff; width:200px; font-size:0">
        <span style="width:100%;display: inline-block;background: #00b0ff; font-size:14px;">1</span>
        <span style="display: inline-block; background: #ff3d00;"></span>
</div>