display
表示形式
| ブラウザ |
|
|---|---|
| 適用対象 | |
| 継承 | 継承しない |
| 初期値 |
inline
|
| メディア |
|
要素の表示形式を指定するプロパティです。
このスタイルを設定すると、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示することができます。
display: inline;
| プロパティ名 | 値 | 説明 |
|---|---|---|
display |
inline |
インラインで表示 (初期値) |
block |
ブロックレベルで表示 | |
list-item |
リスト項目として表示 | |
run-in |
インラインまたはブロックレベルで表示 (状況による) | |
compact |
インラインまたはブロックレベルで表示 (状況による) | |
none |
表示しない (領域そのものを生成しない) |
- IE 7以下とFirefoxは、
run-inとcompactの指定に対応していません。IE 8、Safari、Chromeは、run-inには対応しているもののcompactには対応していないようです。 - table関連の値は省略させていただきました。
run-in について
run-in が指定された要素は、後に続くブロックレベル要素内の最初の部分に、インラインで配置されることになります。
![[run-inのイメージ]](image/run-in.gif)
ただし、次の場合は run-in が指定された要素はブロックレベルで表示されます。
compact について
compact が指定された要素は、後に続くブロックレベル要素の左マージン内に、インラインで配置されることになります。
![[compactのイメージ]](image/compact.gif)
ただし、次の場合は compact が指定された要素はブロックレベルで表示されます。
- このプロパティに関連する目的別リファレンス
- 表示形式(インライン・ブロック・リスト・非表示)を指定する
- displayを使用した横並びのリスト