css消除图片下的白边

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

造成原因：

img本来是行内元素，inline元素会默认产生元素代码中的空白符，大约会有2、3px的空白间隔。很多时候确实让人很头疼，其实解决很简单，下面我会采用不同的方法给以解决。在线运行

 一、大神解法

采用 margin-top: -3px ，不要怀疑，-3px不行，-5px就行了，总有一个适合；还可以采用position来实现，设置背景图片等等，这里就不多说了，这几种方案都不是特别友好，比如图片需要设置固定的宽高，不能做到自适应宽高。

二、img设置display: block

img本来是行内元素，转化成块元素就完美解决了问题，浏览器也都比较友好，个人比较喜欢这种方案。

img {
  display: block;
}

三、父元素设置font-size: 0

虽然也解决了问题，但是不推荐，如果里面包裹的有文本，就会无法显示，有时候遇到文字不显示，还很难发现，如果不嫌麻烦的话，可以对每个子文本元素设置字体。

.imgContainer {
  font-size: 0;
}

四、img设置vertical-align

vertical-align 属性设置一个元素的垂直对齐方式,默认值：baseline,由于line-height存在，元素的高并不是实际的高度，比如设置font-size: 16px，元素并不是真的16px高，而line-height只对文字起作用，对于图片时失效，这时候我们就可以设置对齐方式来解决，可以设置为sub | top | text-top | middle | bottom | text-bottom。

.imgContainer{
  vertical-align: bottom;
}

解决方法有很多，总有一个适合自己。除此之外还可以，父元素设置宽高， 然后再设置overflow: hidden也能解决。