h5-div内img会多2px间隙

最新推荐文章于 2021-06-04 16:57:53 发布

嗯呢小美女

最新推荐文章于 2021-06-04 16:57:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/weixin_45543743/article/details/99750142

html+css 专栏收录该内容

1 篇文章

订阅专栏

本文解析了H5中div内的img元素下方出现2px间隙的现象，并提供了三种解决方案，包括调整line-height、使用vertical-align属性及设置display属性。

div内img会多2px间隙

现象：h5中标签问题，div里面如果装有一个img下边会有2px间隙

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

.div {
  background: black;
}
.img{
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
}

效果：

解析：

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

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

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

.img{
  vertical-align: baseline;
}

解决的方法：

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

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

2、设置vertical-align：middle；

.img{
  vertical-align: middle; //中线对齐
  // vertical-align: bottom; // 底线对齐
  // vertical-align: top; // 顶线对齐
}

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