由img和div的间隙引出：line-height以及vertical-align的问题。

当img后紧跟一个div，或者是和它父级的div，会发现有一个和margin、padding无关的间隙：

去网上查了一下,其中涉及到了line-height以及vertical-align的问题。

正文

• vertical-align

vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式(摘录自MDN)。

vertical-align的取值中有top、middle、baseline、bottom四个值,他们分别对应了

（红色：top、紫色：middle、蓝色：baseline、绿色：bottom）

vertical-align中默认值是baseline也就是说图片的下边缘其实是和蓝色那条线对齐的,而文字元素本身也有高度,所以会多出那么一部分空白的地方，也就是底部绿色线到蓝色线之间的距离。

那么为什么在没有文字的情况下图片也会有底部的间隙,那是因为在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点(摘录自张鑫旭的博客),所以默认vertical-align为baseline的图片会和父div之间存在空隙。

知道这一点，现在问题就好解决了，最直接的可以是

设置img标签的vertical-align

img{
    vertical-align:bottom;//middle和top也都可以
}

设置img标签display:block

前面正文的开头说过vertical-align是设置行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式,所以设置img为块级元素时就不会存在baseline对齐的问题了。

img{
    display:block
}

设置父元素div字体大小为0

.content{
    float:left;
    margin:100px auto; 
    background:pink;
    font-size:0px;
}

The used value is this unitless
multiplied by the element's font size. The computed value is the same as the specified
. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.
所用的值是无单位数值
乘以元素的font size。计算出来的值与使用数值指定的一样。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。 (摘录自MDN)

line-height在不设置单位时是通过与font-size相乘来计算的,设置font-size为0,line-height也为0,而那一端多余的间隙(baseline和bottom之间的差值)也和line-height有关，所以自然而然间隙就消除了。

关于Vertical-align：其只会对inline-block起作用，inline元素是因为linebox的基线变化而不得不变化， 并不是说 Vertical-align对它有效。（默认inline-block的元素例如图片，按钮，单复选框，单行/多行文本框等HTML控件）


链接：https://www.jianshu.com/p/057835080565
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。