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

最新推荐文章于 2023-10-30 15:12:25 发布

Endless Daydream233

最新推荐文章于 2023-10-30 15:12:25 发布

阅读量664

点赞数 1

分类专栏：日常问题总结文章标签： css

本文链接：https://blog.csdn.net/gua222/article/details/107231433

版权

日常问题总结专栏收录该内容

30 篇文章 1 订阅

订阅专栏

今天在学习写京东案例的时候，在给一个盒子添加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>

在这里插入图片描述
如图所示，底部会有一小截的留白。
这是因为 img默认和基线对齐即（vertical-align:baseline）
只要设置 vertical-align:top|middle 就可以解决这个问题。

Endless Daydream233

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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; } &lt
复制链接

扫一扫

专栏目录