去除inline-block間隙的幾種方法

爲何會產生間隙？

因爲編寫代碼時的美觀和可讀性，在代碼中添加回車或空格而產生的間隙。

 

html代碼：

<ul class="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<style>
    .container li{
        display: inline-block;
        width:100px;
        height:100px;
        border:1px solid #ccc;
    }
</style>

 

方法一：

調整html代碼，缺點下降了可讀性，以下

<ul class="container">
    <li>
    </li><li>
    </li><li>
    </li><li>
    </li><li>
    </li><li>
    </li>
</ul>

或者

<ul class="container">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

 

方法二：

去掉閉合標籤：

<ul class="container">
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
</ul>

 

方法三：

font-size:0

.container{
    font-size: 0;
    -webkit-text-size-adjust:none; 
}
.container li{
    font-size:12px;
}

 

方法四：

margin設爲負值,*注：margin的值一般爲font-size的一本取相反數

.container li{
    margin-left:-.5em;
}

 

方法五：

letter-spacing，跟上一種方式同樣，取值爲font-size的一半

.container{
    letter-spacing: -.5em;
}

 

方法六：

word-spacing，相似

.container{
    word-spacing: -.5em;
}