学习CSS你必须踩得那些坑（五）

inline-block空格的问题

现在回去看看，有个问题需要处理一下：

PlatForm，About，Sign Up之间为什么会有间隙？**

使用了inline-block，inline-block会表现得像文字排版一样，<li>和<li>之间存在空白符，所以最后产生了一个空格

有各种奇奇怪怪的方法可以解决这个问题，这里我只给出我平常用得最多的两个方法：

· 设置font-size: 0;（如果浏览器设置了最小字体大小要跪。。。）

·   ul{

·       font-size: 0;

·   }

·   li{

·       display: inline-block;

·       font-size: 1rem;

  }

· 去掉标签之间的空白符

  <li>…</li><li>…</li><li>…</li>

喜欢哪个方法就用哪个，快自己把这个bug修复了

美化导航样式

.navbar__brand, .navbar__nav li a{

  display: inline-block;

 

  box-sizing: border-box;

  height: 40px;

  padding: 8px 24px 8px 24px;

  border: 1px solid #ccc;

 

  line-height: 22px;

}