display:block / inline / inline-block を“動きの違いから理解する”
display は 要素がどのように並び、どれだけの幅・高さを持つかを決める CSS の根本的なプロパティです。
特に block / inline / inline-block の3つは、レイアウトの基礎そのもの。
ここを理解すると、要素が「なぜそこにあるのか」「なぜその大きさなのか」が一気に分かるようになります。
CSS と Tailwind CSS の両方で、初心者でも迷わないように丁寧に解説します。
ブロック要素（display:block）の特徴
要素が“段落のように”縦に積み重なる
.box {
display: block;
width: 200px;
height: 80px;
background: #3182ce;
}
HTML
<div class="box"></div>
<div class="box"></div>
ブロック要素は次の特徴を持ちます。
- 横幅はデフォルトで親いっぱい（100%）
- 高さ・幅を自由に指定できる
- 上下に積み重なる（改行される）
- margin/padding が上下左右に効く
文章の段落（p）、div、h1〜h6 などがこれに該当します。
インライン要素（display:inline）の特徴
“文字のように”横に並ぶ
.text {
display: inline;
background: #fbd38d;
}
HTML
<span class="text">A</span>
<span class="text">B</span>
<span class="text">C</span>
インライン要素は次の特徴があります。
- 横に並ぶ（改行されない）
- width / height を指定できない
- 上下の margin が効きにくい
- 文字と同じ扱い
代表例は span、a、strong など。
深掘り：インラインは“文字の一部”として扱われる
インライン要素は「箱」ではなく「文字の塊」として扱われるため、
高さや幅を指定しても無視されます。
インラインブロック（display:inline-block）の特徴
“横に並ぶけど、幅・高さを持てる”ハイブリッド
.item {
display: inline-block;
width: 100px;
height: 60px;
background: #68d391;
}
HTML
<div class="item"></div>
<div class="item"></div>
インラインブロックは次の特徴を持ちます。
- 横に並ぶ（inline の性質）
- width / height を自由に指定できる（block の性質）
- margin/padding も自由に使える
ボタンやアイコン、タグなどの UI で非常に使いやすい。
Tailwind CSS での書き方
Tailwind は display をユーティリティで指定します。
blockinlineinline-block
block の例
<div class="block w-52 h-20 bg-blue-500"></div>
inline の例
<span class="inline bg-yellow-300">A</span>
<span class="inline bg-yellow-300">B</span>
inline-block の例
<div class="inline-block w-24 h-16 bg-green-400"></div>
<div class="inline-block w-24 h-16 bg-green-400"></div>
3つの違いを“動き”で理解する例
例1：ボタンを横に並べたい
CSS版
.btn {
display: inline-block;
padding: 10px 20px;
background: #3182ce;
color: white;
border-radius: 6px;
}
HTML
<a class="btn">OK</a>
<a class="btn">Cancel</a>
→ inline-block なので横に並び、padding も効く。
Tailwind版
<a class="inline-block px-4 py-2 bg-blue-600 text-white rounded">OK</a>
<a class="inline-block px-4 py-2 bg-blue-600 text-white rounded">Cancel</a>
例2：画像とテキストを横並びにしたい
CSS版
.icon {
display: inline-block;
width: 40px;
height: 40px;
background: #ddd;
}
.label {
display: inline-block;
margin-left: 10px;
}
HTML
<div class="icon"></div>
<span class="label">テキスト</span>
Tailwind版
<div class="inline-block w-10 h-10 bg-gray-300"></div>
<span class="inline-block ml-2">テキスト</span>
例3：ブロック要素を横に並べたい（block → inline-block）
CSS版
.box {
display: inline-block;
width: 150px;
height: 80px;
background: #f56565;
}
HTML
<div class="box"></div>
<div class="box"></div>
Tailwind版
<div class="inline-block w-36 h-20 bg-red-400"></div>
<div class="inline-block w-36 h-20 bg-red-400"></div>
display の違いを深掘り
block は“段落”、inline は“文字”、inline-block は“箱”
- block → レイアウトの骨組み
- inline → テキストの一部
- inline-block → 小さなコンポーネント
このイメージを持つと、どれを使うべきか判断しやすくなります。
inline-block の“隙間問題”
inline-block は HTML の改行が「隙間」として表示されます。
<div class="inline-block w-20 h-10 bg-gray-300"></div>
<div class="inline-block w-20 h-10 bg-gray-300"></div>
→ 2つの間に 4px 程度の隙間ができる
解決策は flex を使うか、HTML の改行を消すこと。
Tailwind では flex を使うのが一般的。
block と inline-block の使い分け
- 横に並べたい → inline-block / flex / grid
- 幅・高さを指定したい → block / inline-block
- テキストの一部として扱いたい → inline
まとめ
display:block / inline / inline-block は、
要素の「並び方」と「大きさの扱い」を決める基本プロパティです。
- block → 縦に積む、幅100%、高さ指定OK
- inline → 横に並ぶ、幅高さ指定NG、文字扱い
- inline-block → 横に並ぶ、幅高さ指定OK、UIで便利
- Tailwind は
block / inline / inline-blockで指定 - inline-block は隙間問題があるので flex も検討
