ボックスモデルCSSプロパティの詳細とデモ

displayプロパティ + run-in

要素の表示形式を指定

ブラウザによっては、一部の値がサポートされていません。とはいっても主に使用するnone,block,inlineプロパティはどのブラウザでも正しい振る舞いをします。

ブラウザのサポート状況

Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera

プロパティ

none指定要素以下が生成されず、表示されません
blockブロック要素として表示します
inlineインライン要素として表示します
inline-block幅や高さなどを指定できるインライン要素
list-itemリスト要素として表示します
compact指定要素の後にくるブロックレベル要素が、回り込み(float)または絶対配置されておらず、指定要素の内容の幅が、後にくるブロックレベル要素の左マージンの幅以下で1行で収まる場合には、その左マージン内にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
run-in指定要素の後にくるブロックレベル要素が、回り込み(float)または絶対配置されていない場合には、その先頭にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
tableテーブル要素として表示します
inline-tableインライン - テーブル要素として表示します
table-captionテーブルキャプション要素として表示します
table-rowテーブル列要素として表示します
table-cellテーブルセル要素として表示します
table-columnテーブルカラム要素として表示します
table-row-groupテーブル列グループ要素として表示します
table-column-groupテーブルカラムグループ要素として表示します
table-header-groupテーブルヘッダグループ要素として表示します
table-footer-groupテーブルフッタグループ要素として表示します
rubyルビ要素として表示します
ruby-baseルビ要素として表示します
ruby-textルビ要素として表示します
ruby-base-groupルビ要素として表示します
ruby-text-groupルビ要素として表示します

displayプロパティ - 値「run-in」のブラウザ動作デモ

※対応していないブラウザでは、正しくレンダリングされません。

ブロック要素やインライン要素などに表示形式を変更

サンプルのブラウザ動作デモで使われている値を変更して確認してみる

HTMLサンプルコード

<div id="result">ブロック要素やインライン要素などに表示形式を変更</div>

CSSサンプルコード

#result {
  border: dotted 1px #666;
  background: #fee;

  /* -- sample code -- */
  display:run-in;

}