CSS display Property

例

表示<p>インライン要素などの要素：

p.inline {
display: inline;
}

もっと"Try it Yourself"以下の例。

定義と使用法

表示プロパティは、HTML要素のために使用されるボックスのタイプを指定します。

デフォルト値：	inline
継承されました：	no
アニメーション：	no. Read about animatable
バージョン：	CSS1
JavaScriptシンタックス：	object .style.display="none" Try it

ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

プロパティ
display	4.0	8.0 5.5から部分	3.0	3.1	7.0

Note:値"inline-table" 、 "table" 、 "table-caption" 、 "table-cell" 、 "table-column" 、 "table-column-group" 、 "table-row" 、および"table-row-group" IE7以前ではサポートされていません。 IE8は、！のDOCTYPEが必要です。 IE9は、値をサポートします。

注：値"flex"と"inline-flex" Safariで動作するように接頭辞を必要とします。 "flex"を使用"display: -webkit-flex"するために、 "inline-flex"使用"display: -webkit-inline-flex;" 。

CSSの構文

display:value;

プロパティ値

値	説明	それを再生します
inline	デフォルト値。インライン要素としての要素を表示します(like <span>)	それを再生します»
block	ブロック要素としての要素を表示します(like <p>)	それを再生します»
flex	ブロックレベルフレックスコンテナとしての要素を表示します。 CSS3の新
inline-block	インラインレベルのブロックコンテナなどの要素を表示します。このブロックの内部には、ブロックレベルボックスとしてフォーマットされ、その要素自体はインラインレベルボックスとしてフォーマットされています
inline-flex	インラインレベルフレックスコンテナとしての要素を表示します。 CSS3の新
inline-table	要素はインラインレベルの表として表示されます
list-item	要素は次のように動作してみましょう<li>要素	それを再生します»
run-in	文脈に応じて、ブロックまたはインラインのいずれかとして要素を表示します
table	要素は次のように動作してみましょう<table>要素
table-caption	要素は次のように動作してみましょう<caption>要素
table-column-group	要素は次のように動作してみましょう<colgroup>要素
table-header-group	要素は次のように動作してみましょう<thead>要素
table-footer-group	要素は次のように動作してみましょう<tfoot>要素
table-row-group	要素は次のように動作してみましょう<tbody>要素
table-cell	要素は次のように動作してみましょう<td>要素
table-column	要素は次のように動作してみましょう<col>エレメント
table-row	要素は次のように動作してみましょう<tr>要素
none	要素がまったく表示されません(has no effect on layout)	それを再生します»
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます	それを再生します»
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

例

継承プロパティの値を使用する方法のデモ：

body {
display: inline;
}

p {
display: inherit;
}

»それを自分で試してみてください

例

内部のいくつかの柔軟なアイテムの方向を設定し<div>逆の順序で要素を：

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}