如何處理內聯元素中的空隙(譯)

weixin_34166847發表於2018-11-18

開發中可能會遇到:一連串的inline-block元素在格式化HTML 之後會出現間隔。
舉個栗子:

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
複製程式碼
nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}
複製程式碼

將在頁面上顯示:

往往我們需要的是每個元素拼接連在一起。像導航欄這種,我們就要避免不能點選的空格出現。

這不是一個bug(我不認為是)。它僅僅是讓元素在一條線上如何顯示的習慣。正確的書寫不就是單詞之間應該有空格的嗎?而inline-block元素之間的空格就像兩個單詞之間的空格。這也不是說規範不能更新,關於取消兩個inline-block元素之間的空格,但我確定這幾乎是不可能發生的事。

下面是一些能避免空格讓元素緊連在一起顯示的方法:

移除空格

之所以顯示時看到空格是因為本來就有空格在兩個元素之間(換行和一些tabs都會視為空格,它們僅僅是讓結構更加清晰)。從HTML結構入手可以解決這問題,下面是一些處理的技巧:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>
複製程式碼

或者,

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>
複製程式碼

又或者添是加註釋的方式,

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>
複製程式碼

設定margin值為負值

可以通過設定負值的margin讓元素回退將空格位置佔滿(具體數值需要根據父元素的字型大小來調整)。不過這種方式在比較老的IE瀏覽器(6 & 7)中會有些問題,如果你不需要考慮那些瀏覽器,就可以用這種方法避免顯示的空格,又能保持清晰的HTML結構。

nav a {
  display: inline-block;
  margin-right: -4px;
}
複製程式碼

跳過閉合標籤

在HTML5 下跳過閉合標籤依然能正常工作。雖然可以這麼做,但還是覺得奇怪。

<ul>
  <li>one
  <li>two
  <li>three
</ul>
複製程式碼

設定font size的值為零

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}
複製程式碼

Matt Stow 研究font-size: 0;發現:這種做法在安卓中會出現一些問題。“Jellybean之前的版本並沒有移除間隔, Jellybean版本有一個bug,就是有時最後一個元素有一個比較小的間隔。”

另外需要注意,如果字型使用的單位是em,被設定font size值為零的元素也會預設將它級聯的子元素的字型大小設定為零。不過使用rem就可以避免這個問題,除此之外就是使用其他非級聯font-size

還有另外怪異的地方!Doug Stewart告訴我,如果使用了@font-face並且使用了該方法,在afari 5.0.x字型將失去anti-aliasing屬性。(測試栗子)(效果圖

使用浮動代替

也許並不需要讓元素inline-block化,也許可以通過設定浮動讓它們一個接一個。這允許你為它們設定它們的width、height、padding。但是不能像父元素是inline-block那樣通過設定text-align: center;讓它們居中。

使用flexbox代替

如果瀏覽器支援flexbox,並且你需要使````inline-block```元素居中,可以使用flexbox。它們雖然不是完全可互換的佈局模型,但是你可能會得到你需要的效果。

效果

完整程式碼

原文

Fighting the Space Between Inline Block Elements

相關文章