【HTML/CSS】图片底部空白缝隙问题

问题描述

在日常开发的过程中我们经常会遇到这样的一个问题：当使用img标签添加图片时，图片底部会出现几像素的空白缝隙。

<div class="box">
    <img src="images/1.jpg" alt="" class="img">
</div>

.box {width: 600px;background: aqua;}
.img {width: 100%;}

原因解析

 img标签在元素的显示模式中属行内块元素，在css的规则中行内元素与行内块元素的垂直对齐方式(vertical-align)默认基线对齐。

 img标签的基线为图片底部边缘，而文字的基线并非文字的底部。

<div class="box">
    <img src="images/1.jpg" alt="" class="img">abcdefg
</div>

.box {background: aqua;font-size: 40px;}
.img {width: 600px;}

解决方法

1. 更改img的显示模式 

将img标签的显示模式设置为display：block以将其转换为块级元素使其在页面中独占一行。

<div class="box">
    <img src="images/1.jpg" alt="" class="img">
</div>

.box {background: aqua;font-size: 40px;}
.img {display: block;width: 600px;}

2. 更改img的垂直对齐方式

 将img标签的垂直对齐方式设置为top、middle、bottom等。

<div class="box">
    <img src="images/1.jpg" alt="" class="img">abcdefg
</div>

.box {background: aqua;font-size: 40px;}
.img {width: 600px;vertical-align: bottom;}

3. 将div中的文字大小设置为0

当div中只存在img标签时，可将div的font-size设置为0。 

<div class="box">
    <img src="images/1.jpg" alt="" class="img">
</div>

.box {background: aqua;font-size: 0;}
.img {width: 600px;}