CSSのdisplayを使い分ける：横並び・改行・サイズ指定で迷わない基本
CSSで要素が意図せず改行されたり、widthやheightが効かなかったりするときは、まずdisplayを確認します。
結論からいうと、縦に積むならblock、文章の一部として流すならinline、横並びのまま箱の大きさを指定するならinline-blockが基本です。
この記事では、次の違いを実際に試せるコードで整理します。
block・inline・inline-blockの表示と改行width・height・marginの効き方- ボタンやタグ一覧での使い分け
- サイズ指定が効かないときの確認方法
- Flexboxを選んだほうがよいケース
対象はHTMLとCSSを学び始めた人です。サンプルは、2026年7月時点の主要なモダンブラウザで動作する標準的なHTML/CSSを使用します。
displayは要素の「外側」と「内側」の並び方を決める
displayは、その要素を周囲にどう並べるかと、子要素をどう配置するかを指定するプロパティです。
たとえば、見出しや段落は通常、前後で改行されます。一方、文章中のリンクや強調部分は、ほかの文字と同じ行に並びます。この違いには、ブラウザが各HTML要素へ適用する既定のdisplay値が関係しています。
代表例は次のとおりです。
<div>、<p>、<h2>：一般にブロックとして表示される<span>、<a>、<strong>：一般にインラインとして表示される
ただし、これはHTML要素に結び付いた変更不能な性質ではありません。CSSでdisplayを指定すれば、見た目の並び方は変更できます。
.example {
display: block;
}
ここがポイント: HTML要素は内容の意味に合わせて選び、
displayは見た目の配置に使います。spanをblockにしても、HTMLとしてdivと同じ意味になるわけではありません。
現在のCSS仕様では、displayには外側と内側の表示形式があると説明されます。たとえば従来のinline-blockは、外側ではインラインとして並び、内側では独立した箱を形成する値です。最初はこの詳細を暗記せず、「周囲との並び方」と「箱としての振る舞い」の2面があると押さえれば十分です。
block・inline・inline-blockの違い
3つの値は、改行の有無とサイズ指定の効き方を見ると区別できます。
| 指定値 | 前後の改行 | 幅・高さ | 主な用途 |
|---|---|---|---|
block |
原則として改行される | 指定できる | 見出し、段落、カード、入力欄のまとまり |
inline |
改行されない | 通常の非置換インライン要素では指定しても反映されない | 文章中のリンク、強調、短い注記 |
inline-block |
改行されない | 指定できる | ボタン、バッジ、幅をそろえた小部品 |
blockは1行分の領域を使う
display: blockを指定した要素は、通常、前後の要素と別の行に配置されます。widthを指定しなければ、利用できる横幅いっぱいに広がるのが基本です。
<div class="block-item">商品名</div>
<div class="block-item">価格</div>
.block-item {
display: block;
width: 240px;
margin-bottom: 8px;
padding: 12px;
border: 1px solid #777;
}
表示は縦に並びます。
[ 商品名 ]
[ 価格 ]
width、height、上下左右のpaddingやmarginを使って、箱の寸法や間隔を調整できます。そのため、ページの区画やフォームの行など、縦方向に積み上げる部品に向いています。
inlineは文章の流れに入る
display: inlineの要素は、文章中の文字と同じ流れで配置されます。要素の前後には自動で改行が入りません。
<p>
受付期限は<span class="notice">金曜日まで</span>です。
</p>
.notice {
display: inline;
color: #b42318;
font-weight: 700;
}
表示イメージは次のとおりです。
受付期限は金曜日までです。
通常のspanなどにdisplay: inlineが適用されている場合、widthとheightを指定しても期待どおりにはなりません。また、上下のmarginも行間を押し広げる目的には使えません。
.notice {
display: inline;
width: 200px; /* 通常は反映されない */
height: 60px; /* 通常は反映されない */
margin-top: 20px; /* 行を下へ押す効果はない */
}
左右のmarginやpaddingは周囲の文字との間隔に影響します。一方、上下のpaddingやborderは見た目上広がっても、隣の行を十分に押しのけず、重なって見えることがあります。
文章の一部分を装飾したいだけなら便利ですが、固定幅のラベルやボタンには向きません。
inline-blockは横並びとサイズ指定を両立する
display: inline-blockは、周囲とはインラインとして横に並びながら、要素自体にはwidthやheightを指定できます。
<a class="action" href="#save">保存</a>
<a class="action" href="#cancel">キャンセル</a>
.action {
display: inline-block;
min-width: 120px;
padding: 10px 16px;
border: 1px solid #2563eb;
border-radius: 6px;
color: #2563eb;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
表示イメージは次のようになります。
[ 保存 ] [ キャンセル ]
文字数が異なるリンクでも、min-widthを指定すれば見た目をそろえられます。paddingやborderも周囲の要素を押しのけるため、文章中の装飾よりも、独立したUI部品に適しています。
3種類の違いを同じコードで確認する
違いを理解する最短の方法は、同じ要素へ3つの値を適用して比べることです。
次のHTMLを保存し、ブラウザで開いてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>displayの比較</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.7;
}
.sample {
width: 160px;
height: 56px;
margin: 8px;
padding: 8px;
border: 2px solid #2563eb;
background: #eff6ff;
}
.is-block {
display: block;
}
.is-inline {
display: inline;
}
.is-inline-block {
display: inline-block;
}
</style>
</head>
<body>
<h2>block</h2>
<span class="sample is-block">A</span>
<span class="sample is-block">B</span>
<h2>inline</h2>
<span class="sample is-inline">A</span>
<span class="sample is-inline">B</span>
<h2>inline-block</h2>
<span class="sample is-inline-block">A</span>
<span class="sample is-inline-block">B</span>
</body>
</html>
確認するポイントは3つです。
block：AとBが縦に並び、幅と高さが反映されるinline：AとBが横に並ぶが、指定した幅と高さにならないinline-block：AとBが横に並び、幅と高さも反映される
ブラウザの開発者ツールで各要素を選び、displayの値を一つずつ切り替えると変化を確認しやすくなります。
実務ではどう使い分けるか
文章に含まれる要素なのか、独立した箱なのか、複数要素の配置なのかを先に判断します。
入力欄を縦に並べるならblock
フォームでは、ラベルと入力欄を縦に積むためにblockを使えます。
<label class="field-label" for="email">メールアドレス</label>
<input class="field-input" id="email" type="email">
.field-label,
.field-input {
display: block;
}
.field-label {
margin-bottom: 4px;
}
.field-input {
width: 100%;
max-width: 480px;
padding: 10px;
}
入力欄にwidth: 100%を指定すると、親要素の利用可能な幅に合わせられます。max-widthを併用すれば、大きな画面で横に伸びすぎるのも防げます。
文章中の注記ならinline
本文の一部だけ色や太さを変える場合は、自然な改行を維持できるinlineが適しています。
<p>
この操作は<span class="warning">取り消せません</span>。
</p>
.warning {
color: #c00;
font-weight: 700;
}
この用途では幅や高さを固定する必要がありません。文章が画面幅に合わせて折り返されるため、スマートフォンでも読みやすさを保てます。
バッジや短いボタンならinline-block
ステータス表示や小さなボタンは、横に並べつつ内側の余白を確保したい部品です。
<span class="badge">対応中</span>
<span class="badge">確認待ち</span>
.badge {
display: inline-block;
margin: 0 4px 4px 0;
padding: 2px 8px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
font-size: 0.875rem;
}
inline-blockなら、文字数に応じて幅を変えながら、背景色と余白を一つの箱として表示できます。
よくある失敗と直し方
displayの問題は、サイズ、余白、揃え方のどこで崩れているかを分けて調べると解決できます。
widthとheightが効かない
次の指定で幅が変わらない場合、対象がinlineになっている可能性があります。
.label {
width: 120px;
}
ボタンやラベルとして箱の幅を持たせたいなら、inline-blockへ変更します。
.label {
display: inline-block;
width: 120px;
}
ただし、すべてのインライン要素で寸法が無効になるわけではありません。画像やフォーム部品などの置換要素には固有寸法があり、通常のspanやテキストリンクとは振る舞いが異なります。まず対象のHTML要素と、開発者ツールに表示される計算済みスタイルを確認してください。
widthより実際の箱が大きくなる
標準のボックスモデルでは、指定したwidthに左右のpaddingとborderが加算されます。
.box {
width: 200px;
padding: 20px;
border: 2px solid;
}
この場合、外側の幅は200 + 40 + 4で244pxになります。指定値の中に余白と境界線を含めたい場合は、box-sizing: border-boxを使います。
*,
*::before,
*::after {
box-sizing: border-box;
}
これでwidth: 200pxは、内容、左右のpadding、左右のborderを含む幅として計算されます。
inline-block同士に小さな隙間ができる
HTML内でinline-block要素の間に改行や空白があると、その空白文字が画面にも現れます。
<span class="item">A</span>
<span class="item">B</span>
この隙間を厳密に管理したい場合、HTMLの空白を不自然に削るより、親要素にFlexboxを使う方法が明確です。
.items {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
<div class="items">
<span class="item">A</span>
<span class="item">B</span>
</div>
gapで間隔を明示できるため、後から項目が増えても管理しやすくなります。
inline-blockの下端が少しずれる
inline-blockはインライン整形の中に置かれるため、既定では文字のベースラインを基準に配置されます。高さの異なる部品を並べると、上端や下端がそろわないことがあります。
上端をそろえたい場合は、次のように指定します。
.card {
display: inline-block;
vertical-align: top;
}
なお、vertical-alignは通常のblock要素を親の中央へ配置するための万能なプロパティではありません。インライン要素や表のセルなど、適用される状況が限られます。
displayだけで中央寄せしようとする
display: blockやinline-blockを指定しただけでは、要素は自動的に中央へ移動しません。
- ブロック要素自体を横方向の中央へ置く：幅を指定し、
margin-inline: auto - インライン要素や
inline-blockを中央へ置く：親にtext-align: center - 縦横の中央配置や複数要素の整列：FlexboxまたはGrid
.parent {
text-align: center;
}
.child {
display: inline-block;
}
目的とする中央寄せの方向と、動かしたい対象を先に決めるのが重要です。
inline-blockとFlexboxはどちらを使うべきか
単独の小部品にはinline-block、複数部品の配置管理にはFlexboxが扱いやすい傾向があります。
inline-blockが向く場面は次のとおりです。
- 文章の流れにボタンやバッジを入れたい
- 要素を内容幅の箱として扱いたい
- 親へ新しいレイアウト指定を加えたくない
- 単純な横並びで十分
一方、Flexboxが向くのは次のような場面です。
- 複数のボタンやカードを一定間隔で並べる
- 上下または左右の位置をそろえる
- 並び順や折り返しを親要素で管理する
gapを使って間隔を明示する
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
inline-blockは古い方法だから使わない、という単純な話ではありません。要素自身をインラインとして扱いたいなら、現在でも適切な選択肢です。複数要素のレイアウトを一括管理するなら、FlexboxやGridのほうが意図をコードに表しやすくなります。
HTMLの意味とアクセシビリティは変わらない
見た目を変えるために、不適切なHTML要素へ置き換えないことが大切です。
displayを変更しても、要素の意味や操作方法は変わりません。
spanをdisplay: blockにしても見出しにはならないdivをdisplay: inline-blockにしてもリンクにはならない- クリック処理を付けた
spanは、buttonと同じキーボード操作を自動では提供しない
ページ移動にはa、操作の実行にはbutton、見出しにはh2など、目的に合う要素を使います。そのうえで、必要な並び方をCSSで指定してください。
迷ったときの判断手順
最初に改行、次にサイズ、最後に複数要素の整列を確認すると選びやすくなります。
- 前後で改行し、縦に積みたいか
– はい：
block - 文章の一部として自然に折り返したいか
– はい：
inline - 横に並べたまま、幅・高さ・上下余白を持たせたいか
– はい：
inline-block - 複数要素の間隔、折り返し、上下位置を親から管理したいか – はい：FlexboxまたはGridも検討
表示が崩れたときは、ブラウザの開発者ツールで次の点を確認します。
- 計算済みの
displayは何か - 別のCSSルールで上書きされていないか
widthにpaddingとborderが加算されていないか- 親要素がFlexboxやGridになっていないか
inline-blockの空白やベースラインが原因ではないか
displayを選ぶ基準は、要素名の暗記ではありません。その要素を改行するのか、箱として寸法を持たせるのか、親から並びを管理するのかを順に判断すれば、必要な値を絞り込めます。
まずは比較用サンプルの.is-inlineを.is-inline-blockへ変え、幅・高さ・上下余白がどう変化するかをブラウザで確認してみてください。その差が分かれば、実際の画面で「サイズ指定が効かない」問題を切り分けやすくなります。