html - 为什么在下面的示例中，内联 block 元素没有占据整个高度？

Question

有一个高度和宽度均为 100% 的内联 block 元素:

<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>

为什么doesn't this div take up whole height, but takes up full width ？

Answer 1

block 框上的自动宽度 causes it to be as wide as its containing block allows 。另一方面，自动高度 causes it to only be as tall as its contents .

有问题的 block 框是body，扩展后是html。这两个元素都没有固有高度(即使初始包含 block 有)，因此两个元素的高度默认为 auto。

内联 block 的 100% 宽度和高度尊重其包含 block 的使用宽度和高度，在本例中为 body。如果您在 body 上指定任意高度，或在 html, body 上指定 height: 100%，则内联 block 将相应调整.

请注意，由于内联 block 本质上与 block 框相同(除了内联放置之外)，因此百分比宽度和高度的计算方式与元素是 block 级的相同。