inline-block元素之间的空白

inline-block元素是指通过设置display:inline-block属性的元素,对象可以是行内和块级元素。

1、inline-block 元素之间的空白

如下将span设置为display:inline-block,可以看见元素之间有明显可见的空白。

<div>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span><span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
</div>

the foolish wait
the foolish waitthe foolish wait
the foolish wait

将块级元素li设置为inline-block,有同样的问题。

  • the foolish wait

  • the foolish wait
  • the foolish wait

  • the foolish wait



>这些空白产生的根本原因是我们在inline-block元素之间的换行。我在第二个和第三个元素之间没有插入换行,就没有产生空白。

### 2、img 等类inline-block元素
img是可替换元素,表现和inline-block元素一致,因此在img之间也会产生空白。

html <div style="background:#00F;width:450px;"> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> </div>






产生问题的原因同上。

### 解决方案

既然知道了问题产生的原因,那么解决方案也就比较容易得出:

1. 最粗暴的办法是不在并列的inline-block元素之间插入换行,直接在一行内写。这样的缺点是代码比较ugly,凌乱不能一目了然
1. 使用一个较大的负word-space,参照这篇文章
1. 换行也是字符,所占宽度和font-size和字体有关系,这个计算比较麻烦,不建议采用
1. 与上面方法同理,不过直接将父亲的font-size设置为0,在元素内部再重新设置font-size
我比较钟爱第四种方法。喜欢哪种解决方案可自行酌情选择,下面是使用font-size:0的效果。

html <div class="demo" style="font-size:0;"> <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span> <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span><span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span> <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span> </div> <div class="demo" style="background:#00F;font-size:0;width:450px;"> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> <img width="144px" height="144px" src="/postimg/github-gravatar.png" /> </div>

the foolish wait
the foolish waitthe foolish wait
the foolish wait





More

同时注意到在img下方也有一块空白,不过这个和上面的不是同一个问题。这个问题可以通过设置vertical-align:top解决,如下。现在图片下面只剩下10px,是外边容器的padding,对照上面看已去掉了图片底下的空白。





comments powered by Disqus