css - line-height作用于行内元素 有空隙的问题

问题描述

问 题

问题1 网页的布局不就是一个一个盒子推起来
行内元素的盒子的高是根据内容大小，但是真实占用的空间不是由行高决定吗？
我的行高可以确保span是10px ，那么多出一部分的空余区域是啥啊？！

解决方案

line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-align属性对齐元素，然后取所有这些框的最高上边界和最低下边界，最高上边界和最低下边界之间的高度组成了实际的行高。
另外，除了这些实际存在的行内元素来说，还存在一个strut元素，这是一个假想的具有块元素的字号和行高的零宽元素，这个元素会参与最后实际的行高。

strut解释如下：

The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

来分析这个例子，span元素是行内元素，span元素所在的行会生成行框。在这个例子中，参与行框生成的元素是span元素和假象的strut元素。该行框是在body元素里面的，所以strut元素具有body的字号和行高，body的字号是40px，行高是1，所以计算后的行高值是40px \* 1 = 40px。span元素的字号是10px，行高是1，计算后的行高是10px \* 1 = 10px。这两个元素按照默认的基线对齐方式进行排列，取最高上边界和最低下边界。因为40px > 10px，所以取的是假想strut元素的上边界和下边界，所以就造成了上面截图的现象。

这篇关于css - line-height作用于行内元素 有空隙的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！