如下图,第二个line-block的span没有内容,但是div的高度是120px
demo: https://codepen.io/GitKou/pen/qNxNxj
<div>
<span class="a">111</span>
<span class="b"></span>
</div>
div {
font-size: 20px;
line-height: 60px;
border: 1px solid #000;
}
.a{
background: pink;
}
.b {
display: inline-block;
line-height: 10px;
width: 100%;
height: 0;
}
为什么呢?
(来自 http://www.w3.org/TR/CSS2/visuren.html#inline-boxes)
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.
(来自 http://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height)
> 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-level box and thus take up space.
关键点是这个inline-block元素本身会被formatted,而不仅仅是content。每个inline-block元素都会没看做line-level的box,他们在他们自己的inline formatting 上下文中被视为一个透明的box,所以会占据空间。对外层来说他是inline,所以外层div设置的font-size和line-height,对其高度有影响。
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.