Inline-block没有内容时，仍有高度

约定不等于承诺〃 2022-09-23 11:51 38阅读 0赞

如下图，第二个line-block的span没有内容，但是div的高度是120px  
demo: [https://codepen.io/GitKou/pen/qNxNxj][https_codepen.io_GitKou_pen_qNxNxj]

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; }

![这里写图片描述][20160718162413828]  
![这里写图片描述][20160719192548723]  
为什么呢？  
(来自 [http://www.w3.org/TR/CSS2/visuren.html\#inline-boxes][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.

[https_codepen.io_GitKou_pen_qNxNxj]: https://codepen.io/GitKou/pen/qNxNxj
[20160718162413828]: /images/20220720/08e62029df0842599b77764d7aec249f.png
[20160719192548723]: /images/20220720/6dd5340a5e0b4fc584972ae49b449200.png
[http_www.w3.org_TR_CSS2_visuren.html_inline-boxes]: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes