inline-block間隔問題

標籤：blog   http   使用   ar   strong   2014   div   sp   問題   

使用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;}

inline-block間隔問題