displayは表示方法を指定するスタイルシート属性である。

書式

display: type;

type
表示要素の種別を次に示します。
説明
blockブロック要素(前後に改行が入る)にします。
inlineインライン要素(前後に改行が入らない)にします。
list-itemリスト項目にします。
none要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じない。
run-in前後関係によりブロック要素かインライン要素か決まる。
inline-blockインラインブロック
tableテーブル
inline-tableインラインテーブル
table-row-grouptbody要素と同じ
table-header-groupthead要素と同じ
table_footer-grouptfoot要素と同じ
table-rowテーブルの行(tr要素と同じ)
table-column-groupcolgroup要素と同じ
table-columncol要素と同じ
table-cellテーブルのセル
table-captioncaption要素と同じ
inherit継承

display:noneは要素を表示しないうえ、余白も生じない。余白を残したい場合は、visibility:hiddenを使用する。

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

スタイルシート属性displayを使用したHTMLの例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<span style="display:list-item">list-item</span> <span style="display:list-item">list-item</span>

list-item list-item

<span style="display:block">block</span> <span style="display:block">block</span>

block block

<span style="display:span">span</span> <span style="display:span">span</span>

span span

Here is <span style="display:none">none</span> element.

Here is none element.