ボックスモデルの概念

Tag:

ボックスモデルの概念について説明します。

各プロパティについて

ボックスモデルとは、ブロックレベル要素がもつ領域の概念で、要素の内容、padding、border、marginから構成されます。各プロパティについて説明します。

ボックスモデルを構成する各プロパティ
プロパティ 説明
width ボックスの内容部分の横の長さ
height ボックスの内容部分の縦の長さ。内容に文字が入っている場合は文字あふれが起こる可能性があるので指定しないほうが良いと思います。

参考情報(最低限の高さの設定)
⇒ min-height を利用
padding borderと内容の間の余白サイズ
border ボックスの外枠
margin ボックスの外側にある余白サイズ

参考情報 (marginの使い方)
■ marginの省略
値が1つ ⇒ [上下左右]
値が2つ ⇒ [上下][左右]
値が3つ ⇒ [上][左右][下]
値が4つ ⇒ [上][右][下][左]

■ 中央配置
margin:auto;

■ 右寄せ
margin-left: auto;
margin-right: 0px;

ボックスの大きさ

ボックスの大きさは、『width+padding+border』を合計したサイズになります。ここで注意が必要なのは、borderはボックスの外側につくということです。

paddingやborderを含めた幅の計算が面倒であれば、『box-sizing: border-box』と指定することでpaddingとborderを要素の幅に含めることもできます。

マージンの相殺

上下に並んだボックスでは、条件によってマージンが重なり、いずれかの大きいマージンの値が反映されます。左右に並んだボックスでは、マージンは相殺されず、各マージンの値が足されたマージンが反映されます。

スポンサーリンク