div内img多2像素问题

div内img会多2px间隙

div里面如果装有一个img下边会有2px间隙

1<div class="div">
2    <img class="img" src="https://upload-images.jianshu.io/upload_images/19298013-e4177135faba11ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
3</div>

1.div {
2  background: black;
3}
4.img{
5  width: 100%;
6  border: 1px solid red;
7  box-sizing: border-box;
8}

效果：

解析：

浏览器有三种模式：1、怪异模式(Quirks)，2、标准模式(Standards)。

在这两种标准模式中，行框总是会包含类似字母"j"，"g"尾巴下伸出来的那一部分空间(针对下行字母)，即使行框内并没有任何内容。因此这种情况下你看到的跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。

图片与父元素之间有间隙，是因为元素默认是基线(baseline)对齐的，看下下图基线位置

即：

1.img{
2  vertical-align: baseline;
3}

解决的方法：

1、可以设置img的父级div的 line-height: 0 或者 font-size: 0；

1.div{
2  line-height: 0; // 行高为0
3  // font-size: 0; // 字号为0
4}

2、设置vertical-align：middle；

1.img{
2  vertical-align: middle; //中线对齐
3  // vertical-align: bottom; // 底线对齐
4  // vertical-align: top; // 顶线对齐
5}

3、设置img为display：block;个人并不建议这种写法，通常在项目中图片右，会紧随文案模块，block并不能满足了。

---

扫一扫 下方二维码，关注我的公众号【前端名狮】，更多精彩内容陪伴