HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎27. ボックスモデルの変更(display)

      2017/07/11   hatano

ボックスモデルの種類について

ボックスモデルの種類はwidthheightmarginpaddingの指定が無効になるものがあり重要です。ほとんどの要素はブラウザのデフォルトCSSボックスモデルの種類が指定されていています。初級で初期値がブロックレベル、インラインと紹介している部分がそうです。
初級6. 要素の種類と記述のポイント
ブロックレベル要素は次の要素が折り返して表示、インライン要素は次の要素が横に並びます。

displayプロパティ(ディスプレイ)

ボックスモデルの種類を変更できます。bodyタグ内で使用できる要素はブラウザのデフォルトCSSボックスモデルの種類が設定されています。displayプロパティの値は今回紹介するもの以外にもあり「中級59. 要素の種類の指定(displayプロパティ)」でまとめて紹介しています。
ボックスモデルの種類を変更しても入れ子のルールが変わるわけではありません。注意してください。例えば段落タグ(p)内に見出しタグ(h1〜h6)を使うことはできません。

display: block;

ブロックレベルの要素になります。次の要素が折り返します。

display: inline;

インラインの要素になります。次の要素が横に並びます。

display: none;

指定した要素が非表示になります。他のテクニックと併用して使います。

まとめ

  • displayプロパティはボックスもの種類を変更することができる

広告

 - HTML・CSS