inline-block

inline-block 的特性

• 既有 inline 的特性，不占据一整行，宽度由内容撑开，多个元素可以并排排列。
• 又有 block 的特性，可以设置 width 、height 、margin、 border、 padding 等盒模型的参数。
  代码
  HTML:

  <div class="nav">
    <span class="box">hellow</span>
    <span class="box">jirengu</span> 
  </div>

CSS

.nav{
  background-color: yellow;
  text-align: center;
}
.box{
  display: inline-block;
  margin: 20px 0;
  border: 1px solid red;
  padding: 10px;
}

Paste_Image.png

去除缝隙

我们发现在两个并排的 inline-block 中间会有一个缝隙，这是因为两个span中间有一些空格和回车，浏览器会把它们合并解读成一个空白字符，如果想去除缝隙，我们可以这样做：

• 在HTML中把两个span粘连着写，没有空格和回车，HTML代码

  <div class="nav">
    <span class="box">hellow</span><span class="box">jirengu</span> 
  </div>

效果为

Paste_Image.png

这种方法的优点是很方便，缺点是代码太丑了，很杂乱，对于追求整洁美观的程序猿来说是不可容忍的，那么，我们就用另一种方法。

• 在CSS中对父容器设置字体大小为0，对子元素再设置字体大小为正常，CSS代码：

.nav{
  background-color: yellow;
  text-align: center;
  font-size: 0;
}
.box{
  display: inline-block;
  margin: 20px 0;
  border: 1px solid red;
  padding: 10px;
  font-size: 1rem;
}

效果为

Paste_Image.png

对齐方式

当 inline-block 的高度不一样的时候，就需要我们去设置对齐方式；

• 顶端对齐：vertical-align: top;
• 中部对齐：vertical-align: middle;
• 底部对齐：vertical-align: bottom;

顶端对齐代码举例

.box{
  display: inline-block;
  margin: 20px 0;
  border: 1px solid red;
  padding: 10px;
  font-size: 1rem;
  vertical-align: top;
}