行内元素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;
}

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容