为什么inline-block导致这个div有高度？ [英] Why does inline-block cause this div to have height?

问题描述

jsFiddle Demo

我似乎不明白为什么使用 display：inline-block 会导致这个< div> 元素以某种方式在其contains元素被隐藏时获得高度。这不会发生在 display：block 。

I cannot seem to figure out why using display:inline-block would cause this <div> element to somehow gain height when its containing element was hidden. This does not happen with display:block.

html：

<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>

为什么显示：inline-block >

Why does display:inline-block cause the gap depicted here?

推荐答案

好的，在评论中已经非常简短地提到：

Ok as already mentioned very briefly in the comments:

inline-block

此值使元素生成内联级块
容器。 inline-block的内部格式化为块框
，元素本身格式化为原子行内框。

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline

此值使元素生成一个或多个行内框。

This value causes an element to generate one or more inline boxes.

这个主题的最重要的部分是元素本身的格式不仅仅是内容。每个 inline-block 元素将被视为原子行内框，从而占用空间。

The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.

源： a href =http://www.w3.org/TR/CSS2/visuren.html#inlineboxbox> http://www.w3.org/TR/CSS2/visuren.html#inline-boxes a>

Source: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

这篇关于为什么inline-block导致这个div有高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！