说在前面:最近在学习张鑫旭大神的《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。

五 、待续

​ 迷迷糊糊，说了自己的一些理解，有的问题还没讲到，只能待有空了再补上😂

​