图片上下排列3px间隔的消除方法
2021-04-28 本文已影响0人
菲儿_cdd4
image.png
问题：
使用img的时候，出现了一个3px的间隙，我首先想到了用浮动和定位，因为img是在基线对齐后进行定位和浮动，所以，都解决不了这个问题
原因：
于是在网上查了一下img标签，img标签是一种类似text的标签元素，在结束的时候会在文本末加上一个空白符（匿名文本），这个文本外有一个匿名的行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把父元素撑高了。
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片3px空白间隙</title>
<style>
body {
margin: 0;
padding: 0;
border: 0;
}
#box {
width: 100%;
}
img {
width: 300px;
height: 230px;
}
#bottom {
width: 300px;
height: 50px;
background: #ccc;
}
</style>
</head>
<body>
<div id="box">
<img src="../image/1.jpg" alt="图片">
<div id="bottom"></div>
</div>
</body>
</html>
解决方案：
1.方案一
//#box是包含img的父盒子
#box{
font-size: 0px;
line-height:0px;
}
2.方案二
img{
display:block;
}
3.方案三
img{
//vertical-align: top;//vertical-align: top|middle;都可以
vertical-align: middle;
}
消除3px的效果：
image.png
