处理inline-block元素之间空格的方法

2017年01月15日Web前端0

inline-block，行内块元素，多个相同的元素换行显示或空格显示时，元素之间会出现空格。

一、现象

html和css，如下：

<div class="box">
    <span class="inlineblock">11</span>
    <span class="inlineblock">22</span>
    <span class="inlineblock">33</span>
    <span class="inlineblock">44</span>
</div>
.inlineblock {
    display: inline-block;
    background-color: red;
}

我们看下浏览器下的显示效果，如下图，很意外，每两个inline-block元素之间出现了间隙。

2017-01-15_143420

二、处理方法

1.去除空格（换行）

修改html，删除空格。

<div class="box">
    <span class="inlineblock">11</span><span class="inlineblock">22</span><span class="inlineblock">33</span><span class="inlineblock">44</span>
</div>

这样的话，空格就没有了，但是这样写法不能很好的阅读，修改如下。

<div class="box">
    <span class="inlineblock">11</span><!-- 
    --><span class="inlineblock">22</span><!-- 
    --><span class="inlineblock">33</span><!-- 
    --><span class="inlineblock">44</span>
</div>

最后，你会发现，这是一个相当不错的方法。

2.使用font-size

.box {
    font-size: 0px;
}
.box > span {
    font-size: 16px;
}

font-size是会被继承的属性，别忘了再给子元素设置下。

3.使用marginf负值

由于margin负值的大小与上下文的字体和文字大小相关，所以这里无法给出具体的数据。

.box > span {
    margin-right: -5px;
}

4.不闭合标签

删除闭合标签，在浏览器中运行，效果虽是我们想要的，但是我们会发现，实际上两个span之间的空格并未消失，而是被临近的span“占”了。打开控制台，我们发现，span元素出现了嵌套现象，所以，这种方式还是不推荐使用的。

<div class="box">
    <span class="inlineblock">11
    <span class="inlineblock">22
    <span class="inlineblock">33
    <span class="inlineblock">44
</div>

5.其他方式

1)我们可以使用float属性来代替inline-block。 2)我们可以使用flex布局来代替inline-block布局。 3)等等...

CSS

目录