font-size:0清除display:inline-block元素换行符间隙实例页面

看别人的代码看到过font-size:0这个设置,不明白为何这样操作,
后来研究一下才明白:这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下:

html:

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css:

.box{
  width: 90px;
  height: 60px;
  border: 1px solid #ccc;
}
.box div{
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  width: 30px;
  border: 1px solid ;
}
  • 理论上box下面的三个div都是30px,刚好在一行显示,但是实际效果是这样:
效果图
  • 这就是上文说到的原因,我们在box下添加font-size:0;再看看效果
效果图
  • 可以看到这才是我们想要的结果,因此在实际开发中,为了更好的还原设计稿,在父元素很有必要设置font-size:0,避免莫名其妙的间距。

根据我的实际开发经验:如果不想给父元素设置font-size:0; 可以给子元素加上浮动

有问题请联系我,(3328921305--南飞雁)

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

相关阅读更多精彩内容

友情链接更多精彩内容