天天看点

inline-block间距问题

兄弟元素设置inline-block,会出现间隙。

inline-block间距问题

原因就是 画红圈的,这些空节点造成的。

inline-block间距问题

解决方法有如下几种:

1,删除标签之间的空节点

inline-block间距问题

但是缺点就是代码太乱了,不行。

2,闭合标签换行(黑科技)

inline-block间距问题

看起来还是影响代码阅读性。

3,父元素设置word-spacing或者letter-spacing为负的,子元素再重写word-spacing或者letter-spacing属性为正常值(0)。

inline-block间距问题

4,父元素设置font-size为0,子元素重新设置font-size为正常值。(我使用的这个方法,不会影响盒模型)

inline-block间距问题