H5中img的实际占地在底部图片大了4个像素

问题描述

CSS
    .img2 {
                height: auto;
                /* 设置漂浮 */
                float: left;
                /* 设置溢出 */
                overflow: hidden;

html

<div class="img2"><img src="img/img1.jpeg" width="333px" ></div>

目的：是未来让DIV根据图片的大小去设置宽高。

可实际的结果与我认为的有写不同

可以很明显的发现DIV的高度为456.94px而img高度为452.94。即DIV比IMG大了4个像素。

---

问题原因

经过查询资料发现问题原因为：img标签为行内块元素

行内元素会为同行的文字预留一些位置

如下图

可以看到字母g的下半段在img下方。

---

解决方案

即然问题原因找到了，那么解决方案就多了去了，

1.将img通过display改变为块元素。即在CSS中加入   display:block；

2.img图片是行内块元素，它有 vertical-align 属性，它的默认值是baseline，baseline的对齐正好是与x字母的下端对齐。所以空白的部分是为了能使div父元素能容纳下g、j、p、y这样的元素，可将vertical-align 设置为 middle 或者 top。 

。。。。

---

.....总之，解决方案有很多比如，直接修改DIV大小等等，那些都会有些违背了初衷，所以这里就不推荐，也比去一一介绍了，想要了解的小伙伴可自行去了解。

参考 ：https://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html

这是我在学习H5的过程中遇到的问题和解决方法，希望能对大家有点帮助。觉得有用可以点个小赞