displayプロパティの基本

このページの目的

すべてのHTML要素が持つdisplayプロパティの基本的な値を理解します。
block, inline, inline-blockの違いをマスターすることで、なぜ要素がそのように配置されるのか、なぜ余白が効かないのか、といった問題の根本原因を理解できるようになります。

view_quiltdisplayプロパティの主な値

すべてのHTML要素は、デフォルトで以下のいずれかの性質を持っています。

display: block;

【性質】レンガブロックのように振る舞います。横幅いっぱいに広がり、前後に改行が入るため、要素は縦に積み重なっていきます。幅（width）、高さ（height）、余白（margin/padding）をすべて指定できます。
【代表的な要素】<div>, <p>, <h1>〜<h6>, <ul>, <li>, <section>

display: inline;

【性質】文章の中の「単語」のように振る舞います。横に並び、自身のコンテンツ分しか幅を取りません。幅（width）と高さ（height）、そして上下の余白（margin-top/bottom）は指定しても無視されます。
【代表的な要素】<span>, <a>, <strong>, <img>

display: inline-block;

【性質】blockとinlineの良いとこ取りです。文章の中の単語のように横に並ぶことができますが、ブロックのように幅・高さ・余白をすべて指定できます。
【代表的な使い方】ナビゲーションメニューのボタンなど、横に並べたいけれど、クリック領域として余白も確保したい要素に使います。

---

visibility視覚的な比較

以下の例は、3つの要素にそれぞれ異なるdisplayプロパティを適用したものです。振る舞いの違いを確認してみましょう。

<!-- HTML -->
<div class="box block-box">Block</div>
<span class="box inline-box">Inline</span>
<span class="box inline-block-box">Inline-Block</span>

<!-- CSS -->
.box {
  margin: 10px;
  padding: 20px;
  width: 200px; /* ← inlineには効かない */
  height: 100px; /* ← inlineには効かない */
  background: #eee;
}
.block-box { display: block; }
.inline-box { display: inline; }
.inline-block-box { display: inline-block; }

このコードを実際に試すと、inlineの箱だけ幅と高さが指定できず、中身の文字に合わせた小さな箱になっていることが分かります。

---

warningよくある間違いと対策

<a>タグをボタン風にしたのに、上下の余白が効かない

<a>タグはデフォルトでdisplay: inlineです。display: inline-block;またはdisplay: block;を指定して、余白が適用されるようにしましょう。

<span>に幅を指定しても、大きさが変わらない

<span>もdisplay: inlineです。大きさを指定したい場合はdisplay: inline-block;に変更するか、<div>などのブロック要素を使いましょう。

要素を横並びにしたいのに、縦に並んでしまう

横並びにしたい要素が<div>や<p>などのブロック要素である可能性が高いです。親要素にdisplay: flex;を指定するか、子要素自体をdisplay: inline-block;に変更するなどの対策が必要です。

---

---