vertical-align 图片底侧空白缝隙的问题

浅浅的花香味﹌ 2021-12-12 07:17 262阅读 0赞

## **一、概述** ##

**vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。**

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 **然而默认的图片会和文字基线对齐**

**这样会造成一个问题，就是图片底侧会有一个空白缝隙。**

代码如下所示：

<head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	div {
    		border: 1px solid red;
    	}
    	</style>
    </head>
    <body>
    	<div>
    		<img src="images/3.jpg" alt="">
    		这是内容
    	</div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]  
有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

## **二、去除图片底侧空白缝隙的解决办法** ##

1.给img vertical-align:middle | top等等。 让图片不要和基线对齐。  
2.给img 添加 display：block; 转换为块级元素就不会存在问题了。

<head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	div {
    		border: 1px solid red;
    	}
    	img {
        	vertical-align:middle;
        }
    	</style>
    </head>
    <body>
    	<div>
    		<img src="images/3.jpg" alt="">
    		这是内容
    	</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]  
这样最终就不会出现图片底侧空白缝隙的问题啦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: /images/20211211/725afaf2f41544c9ba24498550f53794.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]: /images/20211211/0cc3cdb4b74a492a89c03478052c9c44.png