一個很初級但常見的HTML問題 － 已將margin設為零，但兩個inline-block元素間存在消不掉的空隙。
實例如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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>
<divclass="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
<divclass="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算是最省事的解法，就用它吧！
