5

一個很初級但常見的HTML問題 － 已將margin設為零，但兩個inline-block元素間存在消不掉的空隙。

實例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Inline-Block Test</title>
  <style>
  .layout > span {
    display: inline-block;
    background-color: lightblue;
    width: 40px;
    height: 30px;
    margin: 0px;
    line-height: 30px;
    text-align: center;
  }
  </style>  
</head>
<body>
<div class="layout">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>
</body>
</html>

使用網頁開發工具確認<span>的margin與border寬度均為零，但看到的＜span>之間存在間隙。demo

display: inline不能指定元素寬度，display: block可指定寬度但會強制換行，為兼顧指定寬度及並排，<span>採用display: inline-block樣式。但在inline-block模式下，元素HTML標籤間的空白、換行及Tab字元將佔用一格空間（依HTML規範，連續多個空白只會保留一個），以上範例，</span>與下一個<span>間有換行符號及Tab定位字元，視為一個空白，即<span>間空隙的由來。

這問題頗為常見，解法有好幾種：

解法1：移除<span>間的空白與換行 demo

<div class="layout">
  <span>A</span><span>B</span><span>C</span>
</div>

解法2：將容器Font-Size設為0px，再明確指定子元素Font-Size（破壞繼承關係後需重設子元素字型大小，有點搞缸）demo

  <style>
  .layout {
    font-size: 0px;
  }
  .layout > span {
    font-size: 12pt;
    display: inline-block;
    background-color: lightblue;
    width: 40px;
    height: 30px;
    margin: 0px;
    line-height: 30px;
    text-align: center;
  }
  </style>

解法3：設定負值Margin（需視CSS樣式決定數值，無法一體適用） demo

  <style>
  .layout > span {
    display: inline-block;
    background-color: lightblue;
    width: 40px;
    height: 30px;
    margin: 0px;
    margin-right: -4px; //右側加上負Margin
    line-height: 30px;
    text-align: center;
  }
  </style>

解法4：取消block: inline-block; 改用float: left; 一樣可指定元素寬度及高度 demo

  <style>
  .layout > span {
    font-size: 12pt;
    float: left;
    background-color: lightblue;
    width: 40px;
    height: 30px;
    margin: 0px;
    line-height: 30px;
    text-align: center;
  }
  </style>

評估之下，float: left算是最省事的解法，就用它吧！ [2014-11-02補充]設定float:left後，後方的元素會繼續受影響，需補上clear:both或clear:left清除設定，延伸閱讀


Comments

# by REX

也可以加註解 <span></span><!-- --><span></span><!-- --><span></span><!-- --><span></span>

# by huang47

<span>A </span>B<span> </span>C<span> </span>

# by Jeffrey

to REX, huang47, 感謝補充，這兩種做法均需更改HTML配合，與解法1可歸屬為同一類(另外還有一奇招，只寫<span>不寫</span>，但有違大家寫HTML的習慣就是了) PS: huang47範例中的B,C應移到<span>後方，對嗎?

# by 毛豆

如果設定了相對位移也可能發生這種狀況 這時候更難查出為什麼明明 MARGIN = 0 卻有空間存在

# by 苦惱的路人

非常謝謝你!!看了這篇才找到一直無法消除異常空白的原因 還有1F REX的補充解法，真的非常感謝兩位!!

Post a comment