深⼊理解line-height与vertical-align
前⾯的话
line-height、font-size、vertical-align是设置⾏内元素布局的关键属性。这三个属性是相互依赖的关系，改变⾏间距离、设置垂直对齐等都需要它们的通⼒合作。在⾥⾯已经详细介绍了font-size的相关内容，本⽂将主要介绍line-height与vertical-align。本⽂涉及到的术语解释参考
⾏⾼
【定义】
line-height⾏⾼是指⽂本⾏基线之间的距离。⾏⾼line-height实际上只影响⾏内元素和其他⾏内内容，⽽不会直接影响块级元素，也可以为⼀个块级元素设置line-height，但这个值只是应⽤到块级元素的内联内容时才会有影响。在应⽤到块级元素时，line-height定义了元素⽂本基线之间的最⼩距离，即最⼩⾏⾼
[注意]如果块级元素中的某⼀个⼦级内联元素设置的⾏⾼⽐最⼩⾏⾼⼤，则⾏框以设置⾏⾼来渲染；如果⼩，则以最⼩⾏⾼来渲染。因为，每⼀个⼦级内联元素的⾏⾼都是⾏内框的⾼度，只有⼀⾏中所有的⾏内元素(包括代表⽗级元素的匿名⽂本)，最⼤的⾏内框⾼度才能成为整⾏的⾏⾼。下⾯会有详细解释
值: <length> | <percentage> | <number> | normal | inherit
初始值: normal(通常line-height:normal的值为font-size值的1.2倍)
应⽤于: 所有元素
继承性: 有
百分数: 相对于元素的字体⼤⼩font-size
【术语】
要深⼊理解line-height，需要理解关于⾏框构建的常⽤术语。
内容区
对于⾏内⾮替换元素或匿名⽂本某⼀部分，font-size确定了内容区的⾼度
散文《遇见》
⾏内框
内容区加上⾏间距等于⾏内框。如果⼀个⾏内⾮替换元素的font-size为15px，line-height为21px，则相差6px。⽤户代理将这6像素⼀分为⼆，将其⼀半分别应⽤到内容区的顶部和底部，这就得到了⾏内框
当line-height⼩于font-size时，⾏内框实际上⼩于内容区
⾏框
⾏框定义为⾏中最⾼⾏内框的顶端到最低⾏内框底端之间的距离，⽽且各⾏框的顶端挨着上⼀⾏⾏框的底端
框属性
内边距、外边距和边框不影响⾏框的⾼度，即不影响⾏⾼
⾏内元素的边框边界由font-size⽽不是line-height控制
外边距不会应⽤到⾏内⾮替换元素的顶端和底端
margin-left、padding-left、border-left应⽤到元素的开始处；⽽margin-right、padding-right、border-right应⽤到元素的结尾处
【替换元素】
⾏内替换元素需要使⽤line-height值，从⽽在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本⾝的⾼度⽆关紧要，关键是line-height的值
默认地，⾏内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素的基线是正常流中最后⼀个⾏框的基线。除⾮，该替换元素内容为空或者本⾝的overflow属性值不是visible，这种情况下基线是margin底边缘
垂直对齐
【定义】
vertical-align⽤来设置垂直对齐⽅式，所有垂直对齐的元素都会影响⾏⾼
值: baline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baline
应⽤于: ⾏内元素、替换元素、表单元格
继承性: ⽆
百分数: 相对于元素的⾏⾼line-height
[注意]IE7-浏览器中vertical-align的百分⽐值不⽀持⼩数⾏⾼，且取baline、middle、text-bottom等值时与标准浏览器在展⽰效果不⼀样，常⽤的解决办法是将⾏内元素设置display:inline-block
vertical-align:baline(元素的基线与⽗元素的基线对齐)
vertical-align:sub(降低元素的基线到⽗元素合适的下标位置)
vertical-align:super(升⾼元素的基线到⽗元素合适的上标位置)
vertical-align:bottom(把对齐的⼦元素的底端与⾏框底端对齐)
vertical-align:text-bottom(把元素的底端与⽗元素内容区域的底端对齐)
vertical-align:top(把对齐的⼦元素的顶端与⾏框顶端对齐)
vertical-align:text-top(把元素的顶端与⽗元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与⽗元素的基线加1/2⽗元素中字母X的⾼度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从⽗元素继承vertical-align属性的值
)
亚冠联赛
(baline)
亚冠联赛
(sub)
亚冠联赛
(super)
亚冠联赛
(bottom)
亚冠联赛
日记120字
(text-bottom)
亚冠联赛
经典恐怖小说
(top)
亚冠联赛
(text-top)
亚冠联赛(middle)
[注意]<sub>和<sup>默认携带样式vertical-align:sub/super
【inline-block底部空隙】
inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐⽅式是基线对齐(基线对齐在原理上相当于图像底边与匿名⽂本⼤写英⽂字母X的底边对齐)；⽽匿名⽂本是有⾏⾼的，继承⽗级元素设置的⾏⾼，默认为normal(即font-size的1.2倍)，所以X的底边距离⾏框有⼀段距离，这段距离就是图像留出的空隙
于是，解决这个问题有以下⼏个解决办法
1、display:block
因为垂直对齐⽅式只能作⽤于替换元素和⾏内元素，更改为块级元素，会使垂直对齐⽅式失效
2、⽗级的line-height: 0
尖椒肉丝的做法 这样使匿名⽂本与⾏框的距离为0
3、vertical-align: top/middle/bottom XXX
新疆旅游必去十大景点还原
应⽤
【1】单⾏⽂本⽔平垂直居中
div {
line-height : 100px ; width : 100px ;
text-align : center ;
border : 1px solid black ;
}
<div >
测试⽂字</div >
[注意]好多地⽅都写着单⾏⽂本垂直居中是将⾼度和⾏⾼设置成⼀样的值，但⾼度其实是没有必要设置的。仅仅设置⾏⾼就可以，⽂字在⼀⾏中本⾝就是垂直居中显⽰的
测试⽂字【2】图⽚近似垂直居中
div {
line-height : 200px ;
text-align : center ;
}
img{
vertical-align: middle;
}
<div>
佛山文化
<img src="#" alt="#">
</div>
由于字符X在em框中并不是垂直居中的，且各个字体的字符X的⾼低位置不⼀致。所以，当字体⼤⼩较⼤时，这种差异就更明显 [注意]IE7浏览器在写块级元素包含⾏内元素时⼀定要写成换⾏写法，⽽不要写在⼀⾏资本公积是什么意思
//正确1
<div>
<img src="#" alt="#">
</div>
//正确2
<div><img src="#" alt="#"><!-- 这⾥要折⾏或空格 -->
</div>
//错误
<div><img src="#" alt="#"></div>
【3】图⽚完全垂直居中
在⽅法2的基础上设置块级元素的font-size为0，则可以设置图⽚完全垂直居中
div{
line-height: 200px;
text-align: center;
font-size: 0;
}
img{
震旦博物馆vertical-align: middle;
}
<div>
<img src="#" alt="#">
</div>
