為什么 <div> 寬度不顯示，除非包含？

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>

我可以使其起作用的唯一方法是添加＆nbsp。 但是現在我看到了色塊之間的空間：

<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與其內容一樣高。 如果沒有內容，則沒有任何高度。 如果沒有高度，則將零個垂直像素賦予背景顏色。

Answer 2

您需要添加一個高度標注，以查看“空” <div> 。 像這樣。

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