學習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;

}