a标签中添加图片img，底部产生空隙

最新推荐文章于 2024-04-23 22:27:30 发布

TierraChen

最新推荐文章于 2024-04-23 22:27:30 发布

阅读量3.4k

点赞数 8

文章标签： css html css3

本文链接：https://blog.csdn.net/chenxi3218773/article/details/109730506

版权

为什么在a标签中添加一张图片，图片下方和a标签之间会出现空隙？

前言
项目场景：
问题描述：
原因分析：
解决方案：

前言

之前学习前端开发的时候遇到在a标签中添加图片时发现图片底部与a标签底部始终有一个空隙存在，百思不得其解为什么会出现这个问题，后来在网上找了半天知道了原因。

提示：以下是本篇文章正文内容，下面案例可供参考

项目场景：

给a标签中添加img标签

问题描述：

学习前端+CSS的时候遇到，图片img在a标签中，始终和a标签底部有一个空隙

<head>
	<style>
		a{
			display:block;
			width:100px;
			height:100px;
		}
		a img{
			width:100%;
		}
	</style>
</head>
<body>
	<a href="#">
		<img src="图片地址URL" >
	</a>
</body>

在这里插入图片描述

在css样式中给img设置img的宽度是父容器的100%，高度让它自适应，这时在浏览器的控制台会发现图片和img的底部会产生一个空隙

原因分析：

为了弄清楚为啥会产生这种问题，在百度上找了很多，发现其实原因很简单，因为当时设立浏览器标准的是欧洲，行内元素为了正确的显示带有尾巴的英文字母例如：j、g、y，就会在底部留空。

解决方案：

解决方案一：给图片添加属性：display：block；解决方案二：a标签中添加属性：font-size：0；解决方案三：给图片添加属性：vertical-align：middle；（但是我在网上看到有人说，这个属性在低版本的IE浏览器中会产生问题）解决方案四：把img图片设置成a标签的背景图片解决方案五：给a标签添加属性：display：flex；解决方案六：给img标签添加浮动：float：left；

TierraChen

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
a标签中添加图片img，底部产生空隙

为什么在a标签中添加一张图片，图片下方和a标签之间会出现空隙？前言项目场景：问题描述：原因分析：解决方案：前言之前学习前端开发的时候遇到在a标签中添加图片时发现图片底部与a标签底部始终有一个空隙存在，百思不得其解为什么会出现这个问题，后来在网上找了半天知道了原因。提示：以下是本篇文章正文内容，下面案例可供参考项目场景：前端学习时经常遇到的问题问题描述：学习前端+CSS的时候遇到，图片img在a标签中，始终和a标签底部有一个空隙<head> <style> a
复制链接

扫一扫