css-盒子内包含img标签后,底部留白/盒子高度多了几像素的问题

今天在学习写京东案例的时候,在给一个盒子添加img之后,发现盒子高度高了几像素。
例如简单的一个div内包含一个img标签:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		border: 1px solid red;
		float: left;
	}
	</style>
</head>
<body>
	<div><img src="images/pic1.jpg" alt=""></div>
</body>
</html>

css-盒子内包含img标签后,底部留白/盒子高度多了几像素的问题_第1张图片
如图所示,底部会有一小截的留白。
这是因为 img默认和基线对齐 即(vertical-align:baseline)
只要设置 vertical-align:top|middle 就可以解决这个问题。

你可能感兴趣的:(日常问题总结)