学习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;

}