inline 或 inline-block 元素间的间隙

当您将元素显示值设置为内联或内联块时，您一般会在元素之间看到默认的空格。若是您不想要设计中的空格，能够经过多种方法将其删除。

示例代码：

<ul>
    <li id = "first">inline</li>
    <li id = "last">inline-block</li>
</ul>

body {
    margin:0;
}
ul {
    /*font-size: 40px;*/
    list-style:none;
    margin: 0;
    padding:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  设置边框方便查询
}

解决方案

方法一：经过利用负边距，达到删除空隙

---

更改上述代码：

ul li + li {
    margin-left: -5px;
}

这应该经常使用一种方式；可是这种方式会受祖先容器字体大小影响，若是字体越大其间隙越大，也就不是上述提供 -5px，就能达到删除空隙了；

能够经过JS辅助验证，空隙是否跟字体大小有关：

// 字体大小设置为 16px 状况下：
var first = document.querySelector('#first');
var last = document.querySelector('#last');

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  4.732177734375
// 因此咱们前面设置 -5px 缘由， 由于CSS不支持小数点，因此才向上取整；


// 字体大小设置为 32px 状况下：
var first = document.querySelector('#first');
var last = document.querySelector('#last');

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  9.46435546875
// 那么咱们前面设置 -5px ，就会失效了

了解 getBoundingClientRect 使用，你们能够点击这里查看：

方法二：删除元素之间先后间隙

---

<ul>
    <li class = "first">inline</li><li class = "last">inline-block</li>
</ul>

方法三：把父元素 font-size:0，其子元素再从新指定字体大小

---

ul {
    list-style:none;
    margin: 0;
    padding:0;
    font-size:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  设置边框方便查询
    font-size: 16px;
}