Updated / Published

displayプロパティは要素が生成するボックスの表示形式や振る舞いを指定します。通常、要素はそれぞれブロックボックスを生成するブロックレベル要素かインラインボックスを生成するインライン要素の2種類に大別されますが、displayプロパティで別の種類のボックスを生成させたり、別の振る舞いを割り当てることができます。

  • none
  • block
  • inline
  • inline-block
  • run-in
  • list-item
  • table
  • inline-table
  • table-row
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-column
  • table-column-group
  • table-cell
  • table-caption
  • inherit
初期値
inline
適用対象
すべての要素
継承
しない
メディア
all

displayプロパティの値

displayプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none
何もないものとして振る舞う(当該要素分の空白も生成されない)。
"none" の値の効果は、当該要素が生成するボックスの表示の有無を指定する visibilityプロパティの値に "hidden" が指定された場合とは異なり、当該要素分の空白も生成されず、そのスペースは前後が詰めて何もないものとして扱われます。非視覚環境においても当該部分は読み飛ばされます。
block
ブロックボックスを生成する。
(X)HTMLでブロックレベル要素に分類される要素型にはデフォルトでdisplay : block ;が指定されています。
inline
インラインボックスを生成する。
(X)HTMLでインライン要素に分類される要素型(置換インライン要素を除く)にはデフォルトでdisplay : inline ;が指定されています。
inline-block
インラインボックスのように文節・語句単位で行内にレンダリング(描写)されるブロックボックスのインラインブロックボックスを生成する。
高さ・横幅・上下のマージンの指定も有効で、(X)HTMLに該当する要素はありませんが、置換インライン要素と同じ振る舞いをします。
run-in
ランインボックスを生成する。ランインボックスは他の要素との位置関係に応じて振る舞いが変わります。
  • ランインボックスの中にブロックボックスが含まれている場合は、ブロックボックスと同じ。
  • ランインボックスの後にブロックボックスが続く場合は、ブロックボックスの最初のインラインボックスになる。
  • ランインボックスがインラインボックスの後に続く場合は、ブロックボックスになる。
(X)HTMLにデフォルトでランインボックスを形成する要素はありません。
list-item
コンテンツのためのブロックボックス(主要ブロックボックス)ともうひとつ別にリスト項目用のインラインボックスを生成する。
(X)HTMLのli要素にはデフォルトでdisplay : list-item ;が指定されており、リスト項目用のインラインボックスの表示はリスト関連プロパティで指定することができます。
table
(X)HTMLのtable要素と同じ振る舞いをするブロックボックスを生成する。
inline-table
(X)HTMLに該当する要素はありませんが文節・語句単位で行内にレンダリング(描写)されるtable要素と同じ振る舞いをするブロックボックスを生成する。
table-row
表の行要素((X)HTMLのtr要素)として振る舞う。
table-row-group
表の本体の行グループ要素((X)HTMLのtbody要素)として振る舞う。
table-header-group
表のヘッダの行グループ要素((X)HTMLのthead要素)として振る舞う。
table-footer-group
表のフッタの行グループ要素((X)HTMLのtfoot要素)として振る舞う。
table-column
表の列要素((X)HTMLのcol要素)として振る舞う。
table-column-group
表の列グループ要素((X)HTMLのcolgroup要素)として振る舞う。
table-cell
表のセル要素((X)HTMLのtd要素, th要素)として振る舞う。
table-caption
表のキャプション要素((X)HTMLのcaption要素)として振る舞う。

CSS2.1 より、"compact" と "marker" の値は削除され、新たに "inline-block" の値が追加されました。

displayプロパティの実装状況

IE
◯:IE8より"run-in", "table", "inline-table", "table-row", "table-row-group", "table-header-group", "table-footer-group", "table-column", "table-column-group", "table-cell", "table-caption" の値をサポート
Firefox
◯:"run-in"の値はFirefox 25現時点で未だサポートしていない
Opera
Chrome
Safari
iOS
Android

サンプル

<h2 style="display : run-in ;">見出し</h2>
<p>段落</p>
<div>
テキスト
<table style="display : inline-table ; border:1px solid">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</table>
テキスト
<div>