盒子含图片多出几像素高度的问题

最新推荐文章于 2024-09-27 22:37:58 发布

原创最新推荐文章于 2024-09-27 22:37:58 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#img标签 #img高度多出几像素

前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在HTML中，当盒子包含图片时，盒子高度为何会比图片高度多出几像素的问题。该现象在不同HTML标准中普遍存在。解决方案包括设置img标签属性、调整父元素样式或改变图片元素的display属性。问题的根本原因是img元素下方的空白间距。

问题

当一个盒子中含有一张图片，即使这个盒子(不管是块级元素还是行内块)没有设置高度，也会被内容撑起来等于图片的高度，但是事实并非如此。盒子的高度不等于图片的高度，而是多出了几像素，而这种问题出现在，html5、xhtml1.0 strict、xhtml1.1、html4.01 strict中。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{		
			background-color:pink;
		}
		
	</style>
</head>
<body>
	<div class="box1">
		<img src="../images/3.jpg" alt="">
	</div>	
</body>
</html>