<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
bug:图片底侧会有一个空白缝隙,原因是行内块元素和文字的基线对齐
主要的解决方法有两种:
1.给图片添加vertical-align:middle|top|bottom等(提倡使用)
2.把图片转为块级元素。块级元素没有基线对齐问题。
<style>
div {
border: 2px solid red;
}
img {
/*display: block;*/
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="" />pink
</div>
</body>
</html>
图片底侧会有一个空白缝隙问题
最新推荐文章于 2024-07-17 18:42:40 发布