为什么在下面的例子中inline-block元素不占用全部高度？ [英] Why doesn't the inline-block element occupy full height in the following example?

问题描述

有一个100％高度和宽度的内嵌块元素：

There is an inline-block element with 100% height and width :

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

为什么不是这个 div 占据整个高度，但占用全宽？

Why doesn't this div take up whole height, but takes up full width?

推荐答案

一个块盒的自动宽度导致它与其包含的块允许的一样宽。另一方面，自动高度导致它只与高度一样高其内容。

An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.

有问题的方块是 body ，并且扩展名为 HTML 。这两个元素的高度都没有固有的高度（即使初始的包含块），所以这两个元素的高度默认为 auto 。

The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.

内联块的100％宽度和高度尊重其包含块的使用宽度和高度，在此情况下，它是 body 。如果您在 html中为 body 或 height：100％指定任意高度，

The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.

请注意，因为内嵌块本质上与块框相同，除了以外，内嵌块将相应地进行调整。铺设内联，百分比宽度和高度的计算方式与元素是块级别相同。

Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.

这篇关于为什么在下面的例子中inline-block元素不占用全部高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！