2014
May
30

CSS 中有一個屬性 display: inline-block ,這個屬性主要功能是將 HTML Element 排成一列,但是使用 inline-block 會有隱藏空白的問題,造成寬度計算錯誤。

實際測試 Browser 對 inline-block 的實作,結果如下圖,兩個 inline-block 中間會有 4px 的空白。

inline-block space

解決中間空白的方式不難,設定 margin 為負值,硬是將兩個 Element 拉近即可。

Resolve space of "inline-block"
  1. .inline-block {
  2. margin-right: -4px;
  3. }
View Demo

這個 4px 的空間跟 letter-spacing 設定有關,正常情況下會多 4px ,如果你的 letter-spacing 比較大,那麼就會超過 4px,可以適時的加大 margin-right 的值,或是參考下面介紹的兩種做法來解決。



移除 HTML 空白

另一種將兩個 Element 中間的空白移除的方式,是修改 HTML ,將兩個 HTML Tag 結尾與開頭中間的空白、換行移除,另外不必要的換行也應該要移除。

有空白的寫法
  1. <div class="parent">
  2. <div class="item-wrap">
  3. item 1
  4. </div>/*******Remove Space Here*******/
  5. <div class="item-wrap">
  6. item 2
  7. </div>
  8. /****Remove Break line here*****/
  9. </div>
移除空白的寫法
  1. <div class="parent">
  2. <div class="item-wrap">
  3. item 1
  4. </div><div class="item-wrap">
  5. item 2
  6. </div>
  7. </div>
View Demo

YUI3 letter-spacing

Yahoo YUI3 處理 inline-block 空白的方式比較特別,一開始要將 inline-block parent Element 的 letter-spacing 改成負的,這樣兩個 inline-block 就會粘在一起,不過一旦 letter-spacing 被修改,parent Element 底下的所有 Element 也會繼承到這個屬性,所以還要針對 inline-block Element 加上 letter-spacing: normal 調整回來。

yui3 remove space of inline-block
  1. .parent {
  2. letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
  3. *letter-spacing: normal; /* reset IE < 8 */
  4. *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
  5. text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
  6. }
  7.  
  8. .inline-block {
  9. display: inline-block;
  10. width: 150px;
  11. height: 50px;
  12. zoom: 1;
  13. *display: inline;
  14. letter-spacing: normal;
  15. }
View Demo

相關資料


回應 (Leave a comment)