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