为什么图片下面总是多几个像素空白？

[TieMuZhen]

问题效果如下：

<div class="father">
    <img src='https://www.baidu.com/img/bdlogo.gif'>
</div>

因为图片默认是行内元素，行内元素默认是baseline对齐的，和底部会有一段距离。

如上图，绿色线标出了top、text-top、middle、baseline、text-bottom、bottom相对应的位置。

当div的高度和文字的高度是一样的时候，设置vertical-align属性为top、text-top或text-bottom、bottom，效果是一样的。

当vertical-align属性为top、text-top时候，图片顶部和线对齐

当vertical-align属性为middle时候，图片中间和线对齐

当vertical-align属性为baseline、text-bottom、bottom时候，图片底部和线对齐

知道了img表现同文字一样, 我们就能有很多解决办法

一、img就不是inline元素了, 不用像文字那样需要留底

img {
  display: block;
}

二、把img的父元素设为font-size: 0, 字体不占位了, 因此也不会留底, 同理还有line-height: 0;

.box {
  font-size: 0;
}

三、修改verticle-align: baseline;

这是最佳的解决方法, 因为这问题就是由verticle-align: baseline;引起的

img {
  vertical-align: top / middle / bottom;
}