为什么宽度不显示的<div>除非它包含&nbsp;？

Question

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

<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>

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

<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>

有没有办法让我没有方形块？

Answer 1

除非您指定高度,否则div与其内容一样高.如果它没有内容,那么它没有任何高度.如果它没有高度,那么有零垂直像素来给出背景颜色.