line-height，指的是两行文字【基线】之间的距离。
基线：一般就是小写英文字母x的下划线
行内框盒子模型（所有内联元素都有关，以下由内至外讲解）
举例： <p>啦啦啦啦啦啦啦啦<em>啦啦啦</em>啦啦啦</p>
1、 内容区域（content area）
大小与font-size相关（可理解为鼠标选中区域文字的背景,或者说是鼠标放在浏览器console里该元素的html上时显示的背景）
2、 内联盒子（inline boxes）
内联盒子不会让内容成块显，而是排成一行，若外部为inline水平的标签（比如span，a，em等，注意p标签是block元素）则属于内联盒子。单纯的文字则是匿名内联盒子。
3、 行框盒子（line boxes）
每一行就是一个行框盒子，每个行框盒子就是由一个个内联盒子组成。如上述例子就是匿名盒子、内联盒子、匿名盒子组成的行框盒子。
4、 包含盒子（containing box）
即上述p标签所在的包含盒子，由一行行的行框盒子组成。
.test1 {line-height: 12px;font-size: 50px;background-color: #f00;}
.test2 {line-height: 50px;font-size:12px;background-color: #ccc;}
<p class="test1">我的行高为12px，但是字体大小为36px</p>
<p class="test2">我的行高为36px，但字体大小为12px</p>
上述例子可见：内联元素的高度是由行高决定的。
行高拥有继承性
行高 = 内容区域 + 行间距
内容区域只与font-size和font-family有关，与line-height无关，某些字体下，内容区域高度就等于font-size
半行间距 = （行高 - 内容区域） / 2
既然如此，那么： 行高决定内联盒子高度，行间距则可大可小（甚至为负，根据内容区域大小而变化），以保证高度正好等于行高。
line-height的值：
1、 normal
默认属性值，跟随浏览器，且与元素字体相关，一般是字体的1.32或是1.33倍
2、 number
使用数值作为行高值，例如 line-height: 1.5;
根据当前元素的font-size计算，即 line-height = 1.5 * font-size
3、 length
具体的值，比如1.5em，20px
4、 percent
即用百分比表示
相对于设置了该line-height属性的元素的font-size大小计算
即line-height = font-size * n%
5、 inherit
行高继承
虽然行高本身具有继承性，但有些元素比如input默认行高是normal，可通过此来调整
使用经验：
body { font: 14px/1.4286 'microsoft yahei';}
即字体14像素，行高20像素，微软雅黑字体
消除默认情况下图片和文字（或是隐匿节点）基线对齐导致空隙的情况：
1、 图片块状化，因为vertical-align只对内联或是内联块状产生影响
2、 img {vertical-align: bottom}， 即底线对齐，基线对齐会有空隙，底线对齐就没了
3、 容器行高足够小
实际应用：
1、 图片的垂直居中
2、 多行文本垂直居中
把多行文字包含在一个与图片一样的display容器中，即inline-block
基线：一般就是小写英文字母x的下划线
行内框盒子模型（所有内联元素都有关，以下由内至外讲解）
举例： <p>啦啦啦啦啦啦啦啦<em>啦啦啦</em>啦啦啦</p>
1、 内容区域（content area）
大小与font-size相关（可理解为鼠标选中区域文字的背景,或者说是鼠标放在浏览器console里该元素的html上时显示的背景）
2、 内联盒子（inline boxes）
内联盒子不会让内容成块显，而是排成一行，若外部为inline水平的标签（比如span，a，em等，注意p标签是block元素）则属于内联盒子。单纯的文字则是匿名内联盒子。
3、 行框盒子（line boxes）
每一行就是一个行框盒子，每个行框盒子就是由一个个内联盒子组成。如上述例子就是匿名盒子、内联盒子、匿名盒子组成的行框盒子。
4、 包含盒子（containing box）
即上述p标签所在的包含盒子，由一行行的行框盒子组成。
.test1 {line-height: 12px;font-size: 50px;background-color: #f00;}
.test2 {line-height: 50px;font-size:12px;background-color: #ccc;}
<p class="test1">我的行高为12px，但是字体大小为36px</p>
<p class="test2">我的行高为36px，但字体大小为12px</p>
上述例子可见：内联元素的高度是由行高决定的。
行高拥有继承性
行高 = 内容区域 + 行间距
内容区域只与font-size和font-family有关，与line-height无关，某些字体下，内容区域高度就等于font-size
半行间距 = （行高 - 内容区域） / 2
既然如此，那么： 行高决定内联盒子高度，行间距则可大可小（甚至为负，根据内容区域大小而变化），以保证高度正好等于行高。
line-height的值：
1、 normal
默认属性值，跟随浏览器，且与元素字体相关，一般是字体的1.32或是1.33倍
2、 number
使用数值作为行高值，例如 line-height: 1.5;
根据当前元素的font-size计算，即 line-height = 1.5 * font-size
3、 length
具体的值，比如1.5em，20px
4、 percent
即用百分比表示
相对于设置了该line-height属性的元素的font-size大小计算
即line-height = font-size * n%
5、 inherit
行高继承
虽然行高本身具有继承性，但有些元素比如input默认行高是normal，可通过此来调整
使用经验：
body { font: 14px/1.4286 'microsoft yahei';}
即字体14像素，行高20像素，微软雅黑字体
消除默认情况下图片和文字（或是隐匿节点）基线对齐导致空隙的情况：
1、 图片块状化，因为vertical-align只对内联或是内联块状产生影响
2、 img {vertical-align: bottom}， 即底线对齐，基线对齐会有空隙，底线对齐就没了
3、 容器行高足够小
实际应用：
1、 图片的垂直居中
2、 多行文本垂直居中
把多行文字包含在一个与图片一样的display容器中，即inline-block
之后设置外部容器的行高，再之后重置文字区域行高（避免行高继承性）
练习html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
font-size: 12px;
}
.test1 {
line-height: 12px;
font-size: 50px;
background-color: #f00;
}
.test2 {
line-height: 50px;
font-size:12px;
-webkit-text-size-adjust:none;
background-color: #ccc;
}
.test3 {
background-color: #f00;
line-height: 50px;
display: inline-block;
}
</style>
</head>
<body>
<p>啦啦啦</p><span>啦啦啦</span>
<p class="test1">我的行高为12px，但是字体大小为36px</p>
<p class="test2">我的行高为36px，但字体大小为12px</p>
<br />
<br />
<span class="test3">测试背景色，只有在内联块状化后，才会显示line-height那么高的红色。</span>
<br />
<br />
<p style="background-color: #ccc"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt=""></p>
<p>可以观察到上面图片下方有间距，这就是默认vertical-align要和隐匿节点的基线对齐导致的</p>
<br />
<br />
<p style="background-color: #ccc; text-align: center; height: 100px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="position: absolute;" height="100px"></p>
<p>可以发现，隐匿节点被text-align弄到中间后，把后面的因为absolute而导致位置跟随的图片也推了过去。导致图片在中间靠右的地方。(虽然我们知道，直接对容器text-align而不对图片绝对定位就可以让图片居中，这里只是回顾一下绝对定位元素的特性)</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 8px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" >xx嘿嘿</p>
<p>上述即为去掉空隙的一个办法</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" ></p>
<p>由于vertical-align默认基线对齐，图片和隐匿节点的基线默认对齐了</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px; text-align: center;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="vertical-align: middle;"></p>
<p>当我们把图的vertical=align改为middle时，就可以大致居中了。（大致，是因为middle线并不就一定是中间）</p>
<br />
<br />
<p style="background-color: #ccc; line-height: 300px; text-align: center;"><span style="display: inline-block; line-height: normal; width: 500px; vertical-align: middle; text-align: left;">呵呵呵呵呵呵呵呵，呵呵呵呵呵。呵呵呵，呵呵呵呵呵，呵呵呵呵呵，呵呵呵呵呵呵呵，呵呵呵呵，呵呵呵呵呵，呵呵呵呵呵，呵呵，呵呵呵呵呵，呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵，呵呵呵呵呵，呵呵呵呵呵呵，呵呵呵呵。呵呵呵呵呵，呵呵呵呵呵呵呵呵。呵呵呵呵呵呵，呵呵呵，呵呵呵呵呵呵呵呵呵呵呵，呵呵呵，呵呵呵呵呵呵，呵呵呵呵呵。呵呵呵，呵呵呵，呵呵呵呵，呵呵呵呵呵呵呵呵呵。呵呵呵呵呵呵呵，呵呵呵呵，呵呵呵呵呵，呵呵呵呵呵，呵呵，呵呵呵呵呵，呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵，呵呵呵呵呵，呵呵呵呵呵呵，呵呵呵呵。呵呵呵呵呵呵呵，呵呵呵呵，呵呵呵呵呵，呵呵呵呵呵，呵呵，呵呵呵呵呵，呵呵呵呵呵。呵呵呵呵呵。呵呵呵呵。呵呵呵，呵呵呵呵呵，呵呵呵呵呵呵，呵呵呵呵。</span></p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
