去除inline-block间隙的几种方法

Posted 2020-10-03

为什么会产生间隙？

由于编写代码时的美观和可读性，在代码中添加回车或空格而产生的间隙。

 

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