display:inline-block替代float后产生间隔4px的终极解决办法_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:17 共计：3609 浏览

最近在学模板的时候，特别是在使用ul li列表的时候，偶尔也会用display:inline-block替代float使用，但display:inline-block偶一个间隔的问题。

解决办法是百度来的，分享如下：

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

布局如下：
样式：
效果图：经高手的指点，在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari效果如下：完美解决间隔的问题，实现无缝连接

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。