如何去除CSS的inline-block换行引起的间隙

inline-block使用时出现间隙的原因

inline-block可以像内联元素一样处理，能够简单地进行横排，并且能够给出水平宽度和垂直宽度等。这是一个非常方便的设置，所以可以有很多的用处。

但是与此同时，我们在使用inline-block的过程中经常会遇到所谓间隙的问题，我们来看一个例子

HTML

CSS

 .container {
  display: block;
  border: 1px #000 solid;
}
.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
}

效果如下：

  
aaa
  
  
aaa

    aaa
  
  
aaa

CSS

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; 
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  font-size: 16px;
}

在inline-block内输入文字的时候，如果新的inlin-block设定font-size就可以了。

但是，每个盒子中文字的行数不同的话，会发生这样的情况。

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; 
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  font-size: 16px;
  vertical-align: bottom;
}

效果如下：

本篇文章到这里就全部结束了，更多精彩内容大家可以关注 第一PHP社区 的CSS视频教程栏目！！！

以上就是如何去除CSS的inline-block换行引起的间隙的详细内容，更多请关注 第一PHP社区 其它相关文章！