display
表示形式

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
適用対象
継承 継承しない
初期値 inline
メディア
  • all

要素の表示形式を指定するプロパティです。

このスタイルを設定すると、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示することができます。


display: inline;

プロパティの値
プロパティ名 説明
display inline インラインで表示 (初期値)
block ブロックレベルで表示
list-item リスト項目として表示
run-in インラインまたはブロックレベルで表示 (状況による)
compact インラインまたはブロックレベルで表示 (状況による)
none 表示しない (領域そのものを生成しない)
  • IE 7以下とFirefoxは、run-incompactの指定に対応していません。IE 8、Safari、Chromeは、run-inには対応しているもののcompactには対応していないようです。
  • table関連の値は省略させていただきました。

run-in について

run-in が指定された要素は、後に続くブロックレベル要素内の最初の部分に、インラインで配置されることになります。

[run-inのイメージ]

ただし、次の場合は run-in が指定された要素はブロックレベルで表示されます。

  • run-in を指定した要素内に、別のブロックレベル要素が含まれる場合
  • 後に続くブロックレベル要素が、フロート配置または絶対位置決めされている場合

compact について

compact が指定された要素は、後に続くブロックレベル要素の左マージン内に、インラインで配置されることになります。

[compactのイメージ]

ただし、次の場合は compact が指定された要素はブロックレベルで表示されます。

  • compact を指定した要素内に、別のブロックレベル要素が含まれる場合
  • compact を指定した要素が、左マージン内に1行で収まらない場合
  • 後に続くブロックレベル要素が、フロート配置または絶対位置決めされている場合
このプロパティに関連する目的別リファレンス
表示形式(インライン・ブロック・リスト・非表示)を指定する
displayを使用した横並びのリスト