当元素为行内块元素时，元素之间会有缝隙产生
<style>
img {
width: 300px;
height: auto;
}
</style>
<body>
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c5eaee9d61e441d9ca1e7c0ffd104ca~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp" alt="">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c5eaee9d61e441d9ca1e7c0ffd104ca~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp" alt="">
</body>
为什么会有间隙产生呢？
<body>
<img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
</body>
当上面的代码成这样子时(img写在同一行)，img之间的间隙就会消失。
那么就有一个结论:
白色间隙是由于浏览器解析了标签之间的回车或者空白导致的。
但是我们平时写代码中由于代码格式必然要回车换行，或者在map循环中创建dom，空格字符就变得不可控了。
那么怎么解决问题呢？
// 给父容器设置字符不占位置的样式
1.
body{
font-size: 0px;
}
// 或者
2.
body {
line-height: 0px;
}
// 3. 转成块级元素也能有效解决问题
img {
display: block;
}
网友评论