CSS display: inline, block, inline-block など
概略
HTML の表示に使われるタグ (要素) は表示の仕方によって、 主にインライン (inline)、 インラインブロック (inline-block)、 ブロック (block) などの種類があります。
HTML4 時代までタグ名ごとに「a タグはインライン要素、 img タグはインラインブロック要素」 のように分類していました。 現在では CSS の display の設定で、例えば a タグ をブロック要素やインラインブロック要素にすることができます。 HTML5 以降では「a タグは初期設定がインライン要素になっている (変更もできる)」ぐらいの感覚で眺めてください。
| inline | inline-block | block | |
|---|---|---|---|
| 主なタグ | テキスト, a, span, br, b, i など | img, textarea など | div, p, ul系, dl系, h1系, figure, pre など |
| フロー | 左から右へ、右端まで行ったら下 (次の行) へ。 | inline と同じ。 | 上から下へ (左右に並ばない)。 |
| 要素の大きさ | ×: width, height はない。設定しても反映されない。 | ○: width, height を設定できる。 | ○: width, height を設定できる。 |
| padding | ○: 確保される | ○: 確保される | ○: 確保される |
| margin |
○: 左右のマージンは確保される。 ×: 上下のマージンは確保されない。 |
○: 確保される | ○: 確保される |
(補足) display には上以外の値もあります。 例: table-row, table-cell など : table の tr タグ, td タグ list-item : li タグ (block より限定された値) flex grid など MDN: display
a タグや img タグもブロック要素にできます
初期設定がインライン (a タグなど) やインラインブロック (img タグなど)
の要素も CSS で display: block; を設定するとブロック要素になります。
div タグと同じ感覚で扱えます。
a タグを block 要素にする
例:
.ul1 li a {
display: block; /* class="ul1" 内の a タグをブロック要素にする。 */
}
.div1 img {
display: block; /* class="div1" 内の img タグをブロック要素にする。 */
}
インライン要素、 インラインブロック要素、 ブロック要素の違い。
CSS display: inline,block など
CSS: 要素の配置: ブロック要素
また、a タグや img タグを position: absolute; や position: fixed;
や float で配置すると暗黙でブロック要素になります。
インライン要素が暗黙でブロック要素になる場合
コンテンツカテゴリー
インライン要素、ブロック要素という用語は昔風の呼び方で、 これらとは別に現在では コンテンツカテゴリー の視点で分類する話もあります。
インライン要素
インライン要素は CSS の初期設定で display: inline; になっている要素です。文章の中で使用するタグがインライン要素です。
インラインブロック要素
img タグや button タグや textarea タグは CSS の初期設定が display: inline-block; になっています。 インライン (display: inline;) との大きな違いはインラインブロックでは要素の大きさ (幅: width、高さ: height) を設定することができます。
要素の大きさ (width, height) の設定
display: inline; 設定できない。
display: inline-block; 設定できる。
img タグ (インラインブロック) とテキスト (インライン) を混在させたサンプル。
img タグ: 画像を並べる
button タグの基本的なサンプル。 button タグも inline-block の要素です。 扱い方は img タグと同じになります。
button タグ
textarea タグも inline-block です
複数の textarea タグを並べると img タグと同じように並びます。
ブロック要素の div タグなどと並べ方が異なります。
textarea を複数並べるサンプル。
textarea タグ
インライン要素のタグも inline-block で大きさを設定できます
span タグや a タグや b タグなどのインライン要素のタグは、 そのままでは大きさを持たせることができません。 width, height を設定しても反映されません。
インライン要素のタグを display: inline-block; にすると
CSS で width, height を設定することができます。
img タグと同じ感覚で扱えるようになります。
インライン要素をインラインブロック要素にする
ブロック要素
ブロック要素は CSS で display: block; が設定された要素です。 ページのレイアウトなど大きな区画を扱う要素です。 main タグや p タグは初期設定がブロック要素になっています。