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

最新推荐文章于 2025-08-13 18:53:35 发布

原创最新推荐文章于 2025-08-13 18:53:35 发布 · 7.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

HTML CSS 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了图片底侧出现空白缝隙的原因，是因为默认图片与文字基线对齐，而vertical-align可控制图片和文字的垂直关系。同时给出解决办法，一是设置img的vertical-align为middle或top等，二是将img转换为块级元素，避免与基线对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

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>

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

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

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>

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