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

为什么会产生间隙？由于编写代码时的美观和可读性，在代码中添加回车或空格而产生的间隙。 html代码： .container li{ display: inli...

HTML 阅读 4.5万 2 分钟阅读 2017-08-18 16:57

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

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