CSS display: inline-block

Volardev 編集部 April 12, 2026

1. display: inline-block プロパティ

display: inline-block は、inline と block の両方の特性を併せ持つ値を指定するプロパティです。

display: inline と比較した際の大きな違いは、要素の width（幅）と height（高さ）を設定できる点にあります。

また、display: inline-block を使用すると、上下の margin（マージン）や padding（パディング）が適切に保持されます。これに対し、display: inline ではこれらが正しく適用されない場合があります。

display: block と比較した際の大きな違いは、要素の後に改行が挿入されない点です。そのため、要素を隣り合わせに並べることが可能になります。

2. inline、inline-block、block の比較

以下の例では、display: inline、display: inline-block、および display: block の挙動の違いを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* デフォルト値 */
  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; 
}
</style>
</head>
<body>

<h1>display プロパティの比較</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="a">ここにインライン要素があります。</span> Vestibulum consequat scelerisque elit sit amet consequat.</div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="b">ここにインラインブロック要素があります。</span> Vestibulum consequat scelerisque elit sit amet consequat.</div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="c">ここにブロック要素があります。</span> Vestibulum consequat scelerisque elit sit amet consequat.</div>

</body>
</html>

3. inline-block を使用したナビゲーションリンク

display: inline-block の代表的な活用例の一つに、水平方向のナビゲーションメニューの作成があります。

デフォルトでは、リストアイテム（<li>）は垂直に並びますが、以下の例では display: inline-block を使用して水平に並べています。

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<h1>inline-block を使ったナビゲーションメニュー</h1>

<ul class="nav">
  <li><a href="#home">ホーム</a></li>
  <li><a href="#about">私たちについて</a></li>
  <li><a href="#clients">クライアント</a></li>
  <li><a href="#contact">コンタクト</a></li>
</ul>

</body>
</html>

4. プロパティのまとめ

値	説明
`inline`	要素をインラインとして表示します。幅と高さの設定は無視されます。
`block`	要素をブロックレベルとして表示します。常に新しい行から始まり、利用可能な全幅を占有します。
`inline-block`	要素をインラインとして配置しつつ、ブロック要素のように幅と高さを指定できるようにします。