如何去除内联元素（inline-block元素）之间的间距（转载）

Posted 2020-07-01 稍微有点色

前几天写一个专题页

div{width:900px;}
div a{ display:inline-block; width:300px;}
<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>

发现这个900的容器居然容不下3个300的a，纠结了一下，偷偷把里面的a变小了一点点。但是后来被同事发现了，说这个是因为inline元素和inline-block默认都会有间距。可以把它浮动起来，间距就会消失的。float:left;之后间距果然消失了。

下面总结了几条去除inline元素和inline-block元素去除间距的方法：

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值，但要考虑上下文的字体和文字大小。

3、先设定子元素字体，再设置父元素font-size:0px;////chrome中：-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;