inline元素组成了inline box。一行的元素组成了line box。line box的高度是由inline box的高度决定的。注意：inline box的高度不是元素的高度，inline box的高度由元素的line-height属性决定，而元素的高度是由一些自身的属性决定的。所以在例子中我们可以看到，span的height是17px，是由字体大小决定的，而它的inline box的高度是30px，所以span元素占的空间是30px，但是它只渲染了17px，其他的px会等分地在span元素的上下部分，这就是使用line-height做垂直居中布局的原理。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>inline</title> <style> span { background: red; } /* 行高不决定元素本身的高度 */ /* 这里的span元素的高度是由字体的大小决定的，所以这里的span元素的height是17px */ /* 但是行高决定了包含元素的父级元素的高度，所以看到包含span元素的div的高度是30px，是由最大的c3的line-height决定的。 */ /* 另外，如果界面比较小，可以看到div的高度会变化，如果包含了2行，那么是由每一行的line-height最大的相加决定的 */ /* 如果父级加了height，那么父级的height就不由内部元素的line-height决定了 */ .c1 { line-height: 20px; } .c2 { line-height: 8px; } .c3 { line-height: 30px; } .c5 { line-height: 28px; } </style> </head> <body> <div> <!-- 有4个span和一个文本，都是inline元素，inline元素组成的box叫作line box --> <span class="c1">inline box xfg中文</span> <span class="c2">inline box</span> <span class="c3">inline box</span> inline box <span class="c5">inline box</span> </div> </body> </html>
这里的几张图片说明当父级容器有了height之后，子元素的line-height就对父级的元素的height没有影响了。
父级容器设定了height之后，子元素的位置是在上部。虽然子元素的height只有18px，但是，子元素所占的空间是由line-height决定的，所以它还是占了30px的地方，这也就是为什么上面有空白的原因。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line-height</title> <style> /* 这里的span元素没有设置line-height,所以span元素的高度决定了inline box的高度（span元素的高度不是inline box的高度，它是稍微加了一点，所以才会有base line与bottom line的区别），span元素的高度是由字体决定的。 */ /* 所以这个line box的高度是由cc3的字体24px决定的。 */ .c1 { background-color: grey; } /* inline元素在一行中，默认是按照base line（元素自身的高度）对齐的。如果想要居中对齐，可以设置vertical-align为middle，就可以改变单独元素的对齐方式。 */ /* vertical-align可以设置px，默认是以baseline做调整的 */ /* base line是元素自身的高度的下面，bottom是inline-box的高度的下面，所以都会有空白的情况，只不过很小。 */ .cc1 { font-size: 12px; vertical-align: baseline; /* 默认是base line */ vertical-align: middle; /* 设置为middle可以实现居中对齐 */ } .cc2 { font-size: 18px; vertical-align: baseline; /* 默认是base line */ vertical-align: middle; /* 设置为middle可以实现居中对齐 */ } .cc3 { font-size: 24px; vertical-align: baseline; /* 默认是base line */ vertical-align: middle; /* 设置为middle可以实现居中对齐 */ } </style> </head> <body> <div style="border:solid 1px red;"> <!-- 背景的bule是根据span元素自身的高度渲染的，span元素是个inline元素，它的高度由字体大小决定，所以blue渲染了20px --> <!-- 另外，line-height是60px，比span元素本身的高度要高，所以多于的40px会等分在span元素的上下。 --> <!-- 如果这时候包含span元素的div没有设置height，那么div的height就由span的inline-box的高度决定，也就是60px，也就形成了垂直居中的样子 --> <!-- 要想使用line-height的方式实现垂直居中，父级元素不能设置height --> <span style="background:blue;color:#fff;font-size:20px;line-height:60px;"> 居中xfg                      </span></div> <div class="c1"> <span class="cc1">第一段</span> <span class="cc2">第二段</span> <span class="cc3">第三段</span> </div> <div style="background:red"> <span>文字</span> <!-- 这里的img（inline block元素，默认是按照inline排布的，inline排布是默认基于baseline对齐的）在下面有一个空白，这是因为img元素自身的高度是由图片决定的，inline box的高度会在自身高度上加一点 --> <!-- 默认情况下，元素是按照base line也就是自身高度的底线对齐的，所以就看起来有空白了。 --> <!-- 如果想去掉这个空白，可以把img图片的对齐方式改为vertical-align 为 bottom --> <img src="./demo3-4-2.png" /> <!-- 还有另外一种去掉空白的方式，默认img是按照inline排布，只有inline排布才有vertical-align,才有inline-box决定line-box的说法，如果我们把img的display改为block也就不会有空隙的问题了。 --> </div> </body> </html>
原文：https://www.cnblogs.com/JasonWang-code/p/13284923.html
