说在前面:最近在学习张鑫旭大神的《css行高line-height的一些深入理解及应用》和《CSS深入理解vertical-align和line-height的基友关系》这两篇文章的时候遇到一些问题，困扰了很久，如果有遇到相同问题的，希望本文对你有所帮助，如果有理解错误，还请指出！更多内容还请看，以上两篇文章，比我讲的更详细，这里只分享自己的一些理解。
一、问题:
div盒子(其他元素同)在未设定高度的时候，高度由内容的高度撑开。好像这句话没什么问题，就像下面一样：
01.png
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
border: 1px solid;
margin: 50px auto;
}
img {
width: 100px;
}
<div>
<img src="/Pictures/Saved Pictures/路飞.jpg" alt="">
</div>
但细心的你一定发现，为什么图片的底部边缘怎么没有和div的底部边挨在一起，不是说div的高度在未设定的情况下,高度由内容的高度撑开嘛？
02.png
首先这句话没有错，但为什么会有这个问题呢？
这里就和vertical-align有关系了,图片(行内块元素同)默认和文字的对齐方式baseline，也就是说图片是基于基线对齐,那基线时什么呢？这里就又和line-height又有关了。
这里直接用大神的话：
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。
base_line.jpg
如果对于行高有一定理解的你会问，在div盒子里面没有文字，怎么会和文字的基线对齐呢？这里可以理解为了让图片和文字对齐，在图片(行内块)前后有个透明字符存在且宽度为0，不占位置，方便的图片(行内块)在垂直方向的对齐，为了方便理解我们可以自己加一个真实的字符，情况也是相同的，请看：
03.png
所以这里 div的高度 = 内容的高度 = 图片的高度 + 透明字符的高度，但这个等式不严谨，不是完全相等，还请看下面。
二、多出来的高度是什么?
盒子的高度是怎么来的呢？
答；盒子的高度是由所有行框高度累加起来的。
04.png
注意：文本框内的线与线的距离画的不是很严谨
这里还要解决两个问题：什么是行内框？什么行框？
行内框：
1.行内元素宽高组成的框或者行内块宽高形成的框；
2.行内元素的行内框的高度等于line-height
3.行内块的行内框的高度等于图片的高度 + padding + border
行框：
1.由所有的行内框组成的；
2.==行框的高度最高的行内框顶部 到 最低行内框的底部之间的距离==
那么我们现在就可以很清楚的知道，下面多出来高度的部分其实是 基线 到 文本行框距离。
05.png
三、怎么解决这个问题?
知道多出来的部分高度是什么就很好解决了。
在还是图片(行内块)默认vertical-align：baseline情况下，我们可以让文本行内框的行高足够小，至少要使行高小于等于中线到基线的距离(文本默认在文本行内框中垂直居中)，这样文本行内框的底部与基线重合或者在基线之上。在文本的基线和它的行内文本框底部重合的时候，最低的行内框是 图片文本框(和文本的基线对齐) 和 文本行内框；文本的行内框的底部在基线之上时，最低的就是图片文本框了。这两种情况下外面div的高度就和图片的高度相等了。
写成代码的话可以：
1.直接控制line-height的值，line-height=0 ;
06.png
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
border: 1px solid;
margin: 50px auto;
line-height: 0;
}
img {
width: 100px;
}
<div>
<img src="Pictures/Saved Pictures/路飞.jpg" alt="">
<span>x</span>
</div>
2.间接控制line-height行高等于0，可以让font-size = 0 。
07.png
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
border: 1px solid;
margin: 50px auto;
/* line-height: 0; */
font-size: 0;
}
img {
width: 100px;
}
<div>
<img src="Pictures/Saved Pictures/路飞.jpg" alt="">
<span>x</span>
</div>
四、其他方法
在理解多余出来的高度是怎么来的之后，我们还可以用其他方法来去掉这个多余的高度，使图片（行内块）不基于baseline对齐就好了，比如top、middle、bottom等等，或者解决改变图片的(行内块)的显示模式为block。
五 、待续
迷迷糊糊，说了自己的一些理解，有的问题还没讲到，只能待有空了再补上😂
网友评论