本文探讨了在CSS中如何利用padding解决行内块元素间的空白问题，特别是在创建导航栏时遇到的文字大小不一致导致的布局不美观。通过将`<a>`标签转换为行内块元素并巧妙设置padding，可以实现均匀的导航栏宽度，同时介绍了两种解决方案：设置父元素`font-size: 0;`和使用浮动`float`属性。
前言：行内块元素会造成元素与元素之间有空白间隙，单单从效果图看不出，在下面会从控制台就知道有没有空白，按F12打开控制台，记得勾上houver,小图是正常浏览下看，如下面第一图。
应用场景：在导航栏中，文字大小不一样，如果都是div来装，文字大小不一样，会造成两个导航栏文字空白长短不一致，用户效果不是很好，所以用巧padinng值撑开，但是会造成空白。
补充：a链接来直接来装nav导航栏，而a链接是行内元素，不可以设置宽高，所以转换为了行内块元素，所以有空白。
第一种方法：在父元素下添加font-size:0;
第二种方法：加个浮动float:属性值;float也给子元素也加上，毕竟一浮全浮
附上完整代码：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
