【笨問題】Inline-Block元素多出來的間隙

一個很初級但常見的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清除設定,延伸閱讀

歡迎推文分享:
Published 01 November 2014 11:35 PM 由 Jeffrey
Filed under:
Views: 14,229



意見

# REX said on 01 November, 2014 11:48 AM

也可以加註解

    <span></span><!--

--><span></span><!--

--><span></span><!--

--><span></span>

# huang47 said on 01 November, 2014 08:49 PM

<span>A

</span>B<span>

</span>C<span>

</span>

# Jeffrey said on 01 November, 2014 10:07 PM

to REX, huang47, 感謝補充,這兩種做法均需更改HTML配合,與解法1可歸屬為同一類(另外還有一奇招,只寫<span>不寫</span>,但有違大家寫HTML的習慣就是了)

PS: huang47範例中的B,C應移到<span>後方,對嗎?

# 毛豆 said on 02 November, 2014 01:43 AM

如果設定了相對位移也可能發生這種狀況

這時候更難查出為什麼明明 MARGIN = 0 卻有空間存在

# 苦惱的路人 said on 25 June, 2018 10:32 PM

非常謝謝你!!看了這篇才找到一直無法消除異常空白的原因

還有1F REX的補充解法,真的非常感謝兩位!!

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2014>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication