- CSS的基线
详细信息可以参考
https://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/ - a标签内img和底部有间隔的问题
以下是一个很正常的写法,但是打开开发者工具我们会发现,img高度为30px,但是a标签高度为34px。
原因在于,img为行内元素,默认的对齐方式为baseline,在基线和底部之间还有一段距离。
给img元素添加vertical-align: bottom即可解决问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 50px;
height: 30px;
background-color: chocolate;
object-fit: contain;
}
a {
display: inline-block;
}
</style>
</head>
<body>
<a>
<img>
</a>
</body>
</html>