CSS 踩坑指南
1. inline-block 产生间隙的问题
<style>
.main {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
<div class="box">
<div class="main"></div>
<div class="main"></div>
</div>

原因:inline-block 元素间有空格或是换行,因此产生了间隙。
解决方案:
.box {
font-size: 0;
letter-spacing: -3px; /* 负值即可 */
}
这种情况也在img 图片情况下常见,图片的父元素会有一个3px的间隙。

解决方案:
同上述处理一致,父元素设置 font-size 等
图片
<img>
设置display: block
父元素高度设置为图片实际高度(写死高度,不建议)
最后更新于
这有帮助吗?