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

2017年01月15日Web前端

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)等等...