去除inline-block元素间间距

我们先来看一段代码

代码语言：javascript复制

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

将代码执行之后我们会发现这个宽度为900的div居然放不下这三个宽度为300的a标签。原因在于他们之间有一个间隔。下面我来说一下如何去除这个水平间距和垂直间距。

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

例如

代码语言：javascript复制

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

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

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

例如

代码语言：javascript复制

div{width:900px;font-size:0px;-webkit-text-size-adjust:none;}
div a{ display:inline-block; width:300px;font-size:12px;}
<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>

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

5.float:left;

html size spacing text word

0 人点赞