使用inline设置水平导航栏有空白间距问题

- 日理万妓 2022-04-15 06:26 180阅读 0赞

## 问题现象 ##

博主学习css练习写导航栏时遇到使用inline来制作水平导航栏时发现其之间会有一小部分间距，而使用浮动来做水平导航栏则没有此问题。  
间距如下：  
![在这里插入图片描述][20181122164506617.png]  
所以就去搜寻了一下，发现  
**原因是：标签之间的空格或者换行**因为遵从代码规范书写时会有各种换行或空格的形式，如：  
![ul代码段][ul]  
所以，最原始的办法就是换成一行：![在这里插入图片描述][20181122165553916.png]  
不过似乎有些不妥。所以我又搜寻了一些资料，里面总结的很全面：

> [http://www.zhangxinxu.com/wordpress/?p=2357][http_www.zhangxinxu.com_wordpress_p_2357]  
> 此链接by zhangxinxu from [http://www.zhangxinxu.com][http_www.zhangxinxu.com]

所以，我就用了 margin负值来取消间隔。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]  
解决之后：  
![在这里插入图片描述][2018112217073368.png]

#### 补充： ####

还发现了一个很好的方法：  
对父元素添加\{font-size:0\}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。

[20181122164506617.png]: /images/20220415/87ae35c317bf48fc8f4cf8ffbfebca75.png
[ul]: /images/20220415/50bb92c7916748b3b0f67230f8caea71.png
[20181122165553916.png]: /images/20220415/5b13bbe1639e412a84039fdaf015ca18.png
[http_www.zhangxinxu.com_wordpress_p_2357]: http://www.zhangxinxu.com/wordpress/?p=2357
[http_www.zhangxinxu.com]: http://www.zhangxinxu.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220415/7aaf8aa8f64d4c42b42e1c5349cfd4ba.png
[2018112217073368.png]: /images/20220415/c7fb2a82ef3249789e3fc607b78c7d2c.png