line-height

【曾以为CSS牛逼了，然而并没有系列】

---知道line-height是干啥的不？
---知道啊，设置行高的！
---还有吗?和height有什么关系？
---额😊...

周末翻译了两篇国外讲line-height的ppt(运营妹子们叫它怕怕提)：在这里，和这里，总结一下里面的内容吧。
嗯，宝宝以前以为line-height就是个设置行高的、跟height相等的话能够让文字垂直居中。非也哉！line-height其实是有内涵的...

line-height的几个大方面的作用

1. 增加代码的可读性和可理解性(easier to read and comprehend)
2. 控制（尤其是多列布局的）垂直分布(control the vertical rhythm)
3. inline元素的垂直居中(centre inline content vertically)

语法：
<'line-height'> = normal | <number> | <length> | <percentage> | inherit

line-height的使用

normal和inherit

normal的话，在被大环境改造之后，"做自己就好"。换句话说，如果浏览器默认行高就是*1.2倍的文字大小。比如h1{ font-size: 20px}，那么h1的行高就是20*1.2 = 24px

inherit就是继承父元素，暂时没什么可说的。

百分比

body {
 font-size: 16px;
 line-height: 120%;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

element	original value	calculated value	result
body	16px 120%	16 x 120%	19.2px
h1	32px	inherits calculated value	19.2px
p	16px	inherits calculated value	19.2px
footer	12px	inherits calculated value	19.2px

定长

body {
 font-size: 16px;
 line-height: 20px;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

element	original value	calculated value	result
body	16px	20px	20px
h1	32px	inherits 20px	20px
p	16px	inherits 20px	20px
footer	12px	inherits 20px	20px

数值

body {
 font-size: 16px;
 line-height: 1.2;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

element	original value	calculated value	result
body	16px 1.2	16 x 1.2	= 19.2px
h1	32px factor of 1.2	32 x 1.2	= 38.4px
p	16px factor of 1.2	16 x 1.2	= 19.2px
footer	12px factor of 1.2	12 x 1.2	= 14.4px

简写

font : <font-size>/<line-height> || <font-weight> || <font-family>...

也就是说，定义font的时候，可以"顺便"把line-height和其他font的属性一起定义，既规定了文字形式，又规定了相对于文字的行高。

百分比percentage、定长length、数值number的比较

其实可以看出，用百分比和定值的话，不同的元素行高相同，完全继承了body的行高，so pass out！但是 number values allows us to set specific line-heights for different types of elements. 其实是和normal一样的效果。so，number value胜出！（此处有掌声👏）

---

CSS boxed组成

深入了解line-height之前，弄清楚CSS boxes的四部分组成（跟inline/block/inline-block没关系），我们只看一个inline元素：

<p>
  The <em>emphasis</em> element is defined as “inline”.
</p>

四个组成部分分别是:

• containing area
• content area
• inline boxes
• line boxes

哪个部分分别是什么，一看图就知道了：

img 1-1

补充一点：一个containing area(containing box, means它里面包含着其他的boxes)也相当于一个block box。

img 1-2

line-height的组成

从图中可以看到，containing area和content area之间是有空隙的(leading)，这里面我设置了line-height : 3，所以很明显能看得到空隙，上下各占一半(half-leading)，上面的叫top half-leading，下面的叫bottom half-leading。

• 当line-height > font-size的时候，top、bottom各占leading的一半，content area会居中：
  img 2-1
• 当line-height < font-size的时候，top、bottom各占line-height的一半，一起撑起line-height，这个时候line-height依然是居中的，只不过是相对content area来居中，因为content area此时等于font-size，会超出line-height的范围

"The content area then pokes out the top and bottom of the inline box.
The half-leading collapses together to form the inline box height"

img 2-2

决定line-height的因素

line-height是由line box的高度决定的，而由img 1-1我们能够看到，一个line box是由一个或多个inline boxes的高度决定的。确切说，是由这些inline boxes里面最高的那个inline box决定的。什么时候会产生最高的inline box呢？

• Increased line-height（某个非匿名的inline box单独设置了line-height）
• larger font-size (某个单词单独设置了比较大的字号)
• superscript or subscript (上角标或下角标，解决办法 line-height:0)
• replaced element (image、video这种)
  （之前美团一面的那位兄台问我，为什么image和文字处于一行（image高于文字），文字上面会有空缺。现在宝宝知道了，image是和文字的baseline底部对齐的，而image会撑起那行line box的高度，说的就是这一点，他问我image是什么属性的，我竟然说成了inline-block，当时想着它能设置宽高...然而image实际上是inline的啊！！只不过它比较特殊，是一个replaced element！！！啊！啊！啊！）

---

others about line-height

不设置高度的情况下，div实际上是可以由line-height撑起来的，不论font-size多么大都没用，line-height为0的话，整个垮掉！这个时候高度是怎么算的：line-height-font-size = -30px, top-leading=bottom-leading=-30/2=-15。height=top-leading+font-size+bottom-leading=0
相反的，如果font-size为零，而line-height有值的话，高度就能出来。
看图就知道了。

deep-dive讲了一些理想line-height的高度，说是适合人阅读什么的，比如

h1, h2, h3, h4, h5, h6{
  line-height: 1.1;
}
li{
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

再比如large and mid screen上，line-height在1.4到1.6之间是ideal的；而在small screen上，line-height在1.3到1.5之间是ideal的。

---

There's nothing definitely special in the "deep-dive" part, just some proposals to design the height of line-height, but sure there're more interesting things about line-height ,and next time let's talk about its closely friend ------vertical-align, and their relationship 😆.