基礎27. ボックスモデルの変更（display）

HTML・CSS

この記事をシェアする：

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

ボックスモデルの種類はwidth、heightやmargin、paddingの指定が無効になるものがあり重要です。ほとんどの要素はブラウザのデフォルトCSSでボックスモデルの種類が指定されていています。初級で初期値がブロックレベル、インラインと紹介している部分がそうです。
初級6. 要素の種類と記述のポイント
ブロックレベル要素は次の要素が折り返して表示、インライン要素は次の要素が横に並びます。
ここで紹介したdisplayの値以外にも種類があります。displayの詳細な情報は、「応用59. ボックスの種類の指定のプロパティ（display）」で紹介しています。

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

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


<span>テキスト</span><span>テキスト</span>


/* span要素をブロックレベルに変更 */
span{
  display: block;
}

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


<p>段落</p>
<p>段落</p>


/* p要素をインラインに変更 */
p{
  display: inline;
}

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