【HTML5+CSS】img下面有留白，在div内使div高度多出2px

设置一个div元素，在div里面放置三个垂直排列的图片。

html代码：

<div class="box">
    <div class="box1"><a href="#"><img src="img/1.jpg" alt=""></a></div>
    <div class="box1"><a href="#"><img src="img/2.jpg" alt=""></a></div>
    <div class="box1"><a href="#"><img src="img/8.jpg" alt=""></a></div>
</div>

css代码：

.box{
      width: 150px;
      background-color: #ccc;
      margin: 30px auto;
    }
img{
      width: 150px;
      height: 150px;
    }

没有给元素设置任何边距，运行的效果：

设置img的高度是150px，而div的高度变成了152px。

原因是浏览器在解析img时，会自动在img后面添加一部分空白，类似于文本设置行高但并不会被文字完全填满。

解决方法是给img添加样式：
display: block;

还可以解释为，浏览器对图片的解析类似于文本，所以有一个文本垂直对齐方式，默认值是基线对齐，即
verticla-aline: baseline;

什么是基线对齐，拿英文举例

图中红色的线就是基线，基线对齐会在基线下面留一定的空间。
所以，把图片的verticla-aline设置为除baseline以外的值，如middle，也可以解决图片下面留白的问题。