inline-block 的特性

• 既有 inline 的特性，不占據(jù)一整行，寬度由內(nèi)容撐開，多個元素可以并排排列。
• 又有 block 的特性，可以設(shè)置 width 、height 、margin、 border、 padding 等盒模型的參數(shù)。
  代碼
  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

去除縫隙

我們發(fā)現(xiàn)在兩個并排的 inline-block 中間會有一個縫隙，這是因為兩個span中間有一些空格和回車，瀏覽器會把它們合并解讀成一個空白字符，如果想去除縫隙，我們可以這樣做：

• 在HTML中把兩個span粘連著寫，沒有空格和回車，HTML代碼

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

效果為

Paste_Image.png

這種方法的優(yōu)點是很方便，缺點是代碼太丑了，很雜亂，對于追求整潔美觀的程序猿來說是不可容忍的，那么，我們就用另一種方法。

• 在CSS中對父容器設(shè)置字體大小為0，對子元素再設(shè)置字體大小為正常，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

對齊方式

當(dāng) inline-block 的高度不一樣的時候，就需要我們?nèi)ピO(shè)置對齊方式；

• 頂端對齊：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;
}