行内元素BUG

设置行内块元素会出现的BUG

如下代码:

<style>
    .wrapper{
        width: 500px;
        height: 80px;
        background-color: lightpink;
    }
    span{
        display: inline-block;
        width: 50px;height: 50px;
        background-color: brown;
    }
</style>
<div class="wrapper">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

image.png
这里可以看到，每个span之间会有莫名的间隙，其实这个由于在编辑span换行在网页解析的时候会在每一个span后面添加一个&nbsp空格字符。

解决的办法：

• 1.不推荐的方法：
  在后面删除换行，把span写到一行里面。但是在真正上线其实就没有换行这一说，但是在我们编辑的时候，这样不是很方便。

<span></span><span></span><span></span><span></span>

• 2.设置父元素的font-size: 0

.wrapper{
  font-size: 0;
}

同步更新到我的个人博客曌明博客