问题描述
我似乎不明白为什么使用 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的内部格式化为块框
，元素本身格式化为原子行内框。
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有高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！