CSSのdisplay: block / inline / inline-blockの違い

CSSでレイアウトを作っていると、display: block、display: inline、display: inline-blockという指定を見かけることがあります。

これらは、HTML要素をどのように表示するかを指定するdisplayプロパティの値です。

それぞれの違いを理解しておくと、要素の配置やサイズを調整しやすくなります。

block

blockは、要素が横幅いっぱいまで広がり、基本的に前後で改行される表示方法です。

代表的な要素には、div、p、h1などがあります。

.box {
  display: block;
  width: 300px;
  height: 100px;
}

widthやheightを指定してサイズを調整できます。

また、基本的に1つの要素が1行を占有するため、要素を縦に並べるときによく使われます。

inline

inlineは、文章のように横方向へ並んで表示される表示方法です。

代表的な要素には、spanやaなどがあります。

.text {
  display: inline;
}

inlineでは、基本的にwidthやheightを指定してサイズを変更することはできません。

文章の一部やリンクなど、テキストと一緒に扱いたい要素に適しています。

inline-block

inline-blockは、inlineのように横並びになりながら、blockのように幅や高さを指定できる表示方法です。

.button {
  display: inline-block;
  width: 150px;
  padding: 10px;
}

例えば、ボタンや横並びにしたいメニューなどで使用できます。

inlineとblockの両方の特徴を持っているため、以前からWebサイトのレイアウトでよく使われてきました。

3つの違い

値	横並び	width・height	主な用途
block	基本的にしない	指定できる	文章や大きなレイアウトのまとまり
inline	する	基本的に指定できない	文章中の文字やリンク
inline-block	する	指定できる	ボタン、横並びの要素など

使い分けのイメージ

簡単に覚えるなら、

• block → 縦に並ぶ、サイズを指定できる
• inline → 文章のように横に並ぶ、サイズを指定しにくい
• inline-block → 横に並ぶ、サイズも指定できる

という違いです。

例えば、文章の中の一部を装飾するならinline、ボタンを横並びにしながらサイズを指定したいならinline-block、ページ内の大きなコンテンツを縦に並べるならblockというように使い分けられます。

まとめ

displayプロパティは、HTML要素の表示方法を決める基本的なCSSプロパティです。

特にblock、inline、inline-blockの違いは、CSSでレイアウトを作るうえで覚えておきたいポイントです。

最近のWeb制作ではflexやgridを使ってレイアウトを組むことも多いですが、これら3つの基本的な違いを理解しておくと、CSSの仕組みをより理解しやすくなります。