W3G

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>