以下代码的图片的下边会产生一点空隙,如图所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="test">
<img src="https://cdn2.jianshu.io/assets/default_avatar/avatar-notebook-default-640f7dde88592bdf6417d8ce1902636e.png" />
</div>
</body>
</html>
<style type="text/css">
.test {
background-color: green;
}
.test>span {
background: #FFFF00;
}
</style>
image.png
解决办法:
- 把图片变为块级元素
img {display: block}
- 给图片的vertical-align设置任意一个值
img {vertical-align: middle;}
image.png
网友评论