fontsize:0清除display:inlineblock元素换行符间隙实例页面

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

###html:

<div class&＃61;"box"><div>1div><div>2div><div>3div>
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&＃xff0c;刚好在一行显示&＃xff0c;但是实际效果是这样&＃xff1a;

• 这就是上文说到的原因&＃xff0c;我们在box下添加font-size:0;再看看效果

• 可以看到这才是我们想要的结果&＃xff0c;因此在实际开发中&＃xff0c;为了更好的还原设计稿&＃xff0c;在父元素很有必要设置font-size:0&＃xff0c;避免莫名其妙的间距。