图片下那诡异的留“红”？CSS篇

先发制人！

div{

background:red;

}

img{

width:100px;

height:70px;

}

看出了蹊跷所在了吗，图片底下为什么多了一道缝隙呢？许多同学都知晓，图片基线对齐嘛，不是很简单吗？那你们乞是知道，为什么会基线对齐吗？

先来了解一下这幅图的含义(没画好，x底部是贴紧基线的)。一般文字的对齐方式都是以"x"的底部为准，也就是基线。line-height这个CSS属性是控制顶线与底线之间的距离的(只作用于行内元素)，当line-height:0;时顶线和底线重合在一起。当font-size:0;时，中线与基线会重合在一起。

好了，进入正题！！！

我们在图片的前面加一个x

x

基线对齐了是吧，就算是没有x，图片也能基线对齐，这就是浏览器的一个渲染的一个特点。浏览器会在行框盒子(每一行文本都存在一个行框盒子)前加一个宽度为零的隐藏元素，专为行内元素中的文字基线对齐，而我现在就是用x来代替那个隐藏元素。

那为什么下面还是会空出一道缝隙呢？让我们来一探究竟~

先为x设置一个span元素

x

打开了熟悉的控制台，我们可以发现，x把撑起了下半部分。知道是谁搞的鬼吗？............根据我自己的理解，每个行内元素都含有默认的line-height值，这个值是相对font-size，也就是字体大小计算的。

不信！来看看~

此时，我把x的font-size设置为了100px，是不是行高也变大了，而且下面的空隙变得更大了。

现在知道了原理后，就变得好办了，直接line-height:0;走一波

div{

background:red;

line-height:;

}

img{

width:100px;

height:70px;

}

此时你肯定想问:line-heiht不是作用在内联元素上吗，为什么要在块级元素上设置？那又怎么样，line-height是有继承性的。此时设置的line-height值相当于给其所有的子元素都设置了line-height:0;也包括那隐藏元素。如果单独为span设置line-height:0;是不行的，因为罪魁祸首是隐藏元素！

如果你还想问还有什么方法去掉那一道空隙，有！vertical-align家族帮你瞬间解决问题，设置属性值为top，bottom，middle都可以去掉。

首先介绍一下middle属性值

img{

vertical-align:middle;

width:100px;

height:70px;

}

此时图片多加了一个vertical-align:middle，对齐隐藏元素的中线。可以看到，不仅是空隙不见了连行内的文字都居中了。这是由于隐藏元素没有足够的行高撑起父元素，图片过大，导致隐藏元素不能占据主导地位去控制图片的位置，而是移动到x的所在位置(要记住，每个行框盒子也就是每一行的最前端都含有一个宽度为零的元素用于调整文字与图片的对齐方式)。

同理与vertical-align:middle vertical-align:top 与 vertical-bottom也一样能消除空隙

vertical-align:top;//文本对齐方式:对齐隐藏元素的顶线，此时隐藏元素跑到了顶部

vertical-align:bottom;//文本对齐方式:对齐隐藏元素的底线此时隐藏元素跑到了底部

总而言之:一切的一切都是隐藏元素搞的鬼，只要把隐藏元素制服，图片下就不会留下空隙。要记住，每个行框前都含有一个隐藏元素，这个隐藏元素可以看成宽度为零的"x"。

喜欢本文的话可以关注我的公众号，有问题的也可以关注我的公众号，有时间的话，我每天都更新好的推文。