html - 为什么具有宽度的 不显示，除非它包含一个？

Question

我想显示一 block 宽度不同且中间没有空格的颜色 block 。为了测试它，我制作了这个 HTML，但它没有显示为一个 block :

<div style="text-align: left;">
   <div style="display:inline-block;background-color:green; width:0rem;"></div>
   <div style="display:inline-block;background-color:red; width:0.3rem"></div>
   <div style="display:inline-block;background-color:yellow; width:0.9rem"></div>
</div>

我能让它工作的唯一方法是添加  .但是现在我看到色 block 之间有一个空间:

<div style="text-align: left;">
   <div style="display:inline-block;background-color:green; width:0rem;">&nbsp;</div>
   <div style="display:inline-block;background-color:red; width:0.3rem">&nbsp;</div>
   <div style="display:inline-block;background-color:yellow; width:0.9rem">&nbsp;</div>
</div>

有没有一种方法可以在没有 的情况下制作方形 block ？

Answer 1

除非指定高度，否则 div 与其内容一样高。如果它没有内容，那么它就没有任何高度。如果它没有高度，则有零个垂直像素来赋予背景颜色。