inline-block間隔問題

使用inline-block實現一個相似float佈局效果，可是inline-block的元素間會存在「4px」的空白間距。

span {
    display: inline-block;
    width: 30px;
    height: 30px;
}

<div class="area">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

問題緣由

inline-block元素，之間有空白文本。

解決方案

方案一： 刪除inline-block元素之間的空白文本

<div class="area"><span></span><span></span><span></span><span></span><span></span></div>

方案二：使用css特殊方法

/*設置父元素樣式*/
.area{
    font-size: 0;
    letter-spacing: -4px;
}