CSS レイアウト – display: inline-block

display: inline-blockの値

display: inlineと比較して、display: inline-blockの主な違いは、要素に幅と高さを設定できることです。

また、display: inline-blockでは上下のマージンやパディングが尊重されますが、display: inlineでは尊重されません。

display: blockと比較して、display: inline-blockの主な違いは、要素の後に改行が追加されないため、他の要素の隣に配置できることです。

例

以下の例では、display: inline, display: inline-block, display: blockの異なる挙動を示しています：

span.a {
  display: inline; /* spanのデフォルト */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

inline-blockを使用してナビゲーションリンクを作成する

display: inline-blockの一般的な使用例として、リストアイテムを垂直ではなく水平に表示することがあります。以下の例は水平ナビゲーションリンクを作成します：

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}