CSS講座 / display：block・inline・inline-block・非表示

displayは要素がどのようなボックスを作り、配置へ参加するかを決めます。通常フローのblock・inline・inline-blockは寸法と改行の扱いが異なり、display:noneはボックスをなくし、visibility:hiddenは元の空間を残します。

三つの基本的な並び方

通常、divやpはblock、spanやaはinlineです。幅を別に指定しない通常のblockは利用できる幅を使い、新しい行から始まります。普通のinlineは文章と同じ行へ入り、長い内容なら複数行に分かれます。

inline-blockは一つのまとまったボックスとして行へ入ります。内部の文章は折り返しても、ボックス自体は普通のinlineのように分割されません。blockとinline-blockには幅・高さを指定できますが、通常の文字用spanやaのinlineには同じように適用されません。

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

同じ三つのspanに同じ寸法と余白を指定し、displayだけを変えます。inlineの宣言一覧にwidthが残っていても、実際の使用幅がその数値になるとは限りません。宣言・計算値・実際の大きさを分けて確認します。

inlineの余白と置換要素の例外

普通のinlineでは左右のpaddingとmarginは行内の空間へ影響します。上下のpaddingや枠は描けますが、blockのように周りの行を押し広げて行高を決めるものではありません。大きな上下paddingを複数行の文字へ付けると重なって見える場合があります。

一方、imgなどの置換要素は外部の内容を表示し、初期表示がinlineでもwidthとheightを使えます。完全な例の青い画像は120×60pxです。「inlineにはサイズが付かない」をすべての要素へ一般化しないでください。MDNのblockとinlineの配置が基礎を説明しています。

noneとhiddenを比較する

DOM（Document Object Model）はブラウザーが文書を構造として扱うモデルです。CSSで隠すことはHTML要素の削除とは違い、noneの段落もElementsで探せます。完全な例の「前・対象・後」の並びではhiddenは対象の空きを残し、noneは後ろが詰まります。

非表示は見た目だけでなくキーボード操作や支援技術への公開にも関わります。この実習は静的な空間の比較です。実際のメニューや操作部品ではフォーカスの管理と必要情報の残り方も確認します。MDNのdisplay、visibilityを参照できます。

inline-blockの基準線と意味の分担

inline-blockは文字の行の中にあり、初期状態では基準線へ揃います。下の隙間や高さが違う部品のずれはvertical-alignとline-heightを一緒に調べます。HTMLの要素間の空白や改行も行内の隙間として見える場合があります。

displayを変えてもspanが見出しになったりdivがボタンとして操作できたりするわけではありません。意味に合うHTMLを選んでから配置します。複数の箱の整列や間隔をまとめて管理するなら、Flexboxの基本やGridの基本が適する場合があります。

完全な例で一つずつ値を変える

次をUTF-8のdisplay.htmlとして保存します。画像はSVGデータを含むため別ファイル不要です。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. blockとinline-blockの枠までの寸法を確認します。共通border-boxで120×48pxです。inlineの文字用要素は同じwidth宣言でも120pxに固定されません。
2. 窓を狭め、inline-blockの三個目が次行へ回ることを見ます。blockは広い画面でも各項目が改行します。
3. .none内の.targetのdisplay:noneを外し、対象が現れて後ろの文字が動くことを見ます。hiddenを外す場合は元の空間が保たれたまま表示されます。
4. 画像の幅だけ160pxへ変え、普通のspanと違って寸法が変わることを確認して120pxへ戻します。高さ60pxを固定したまま幅だけ変えると元の比率も変わります。

予想と違えば最終的なdisplay、親の配置、ボックスの寸法、行高を調べます。効かない寸法宣言を増やす前に、対象の種類とフローを確認します。