CSSのボックスモデル
CSSのボックスモデルでは四角形の周りにそれを囲む四角形が何重もある構造を思い浮かべて領域を考える必要があります。
content領域について
一番内側にある領域はcontent領域といい、画像や文字などが表示される範囲です。幅はwidth、高さはheightで指定します。
padding領域について
content領域を取り囲むようにpadding（余白）領域があり、padding領域の外辺にはborder領域があります。padding領域は、top(上)・right(右)・bottom(下)・left(左)方向に範囲（幅または高さ）を指定でき、padding-top、padding-right、padding-bottom、padding-leftプロパティで指定します。padding領域では背景色や背景画像を表示できます。
border領域について
border領域は幅を指定できます。border-top-width,border-right-width,border-bottom-width,border-left-widthのプロパティが用意されています。border領域では直線や破線など線を太さや色を指定して引く事ができます。
margin領域について
borderの外側が最も外側でmargin領域があります。隣り合うボックスと間を空けるためのものです。margin-top、margin-right、margin-bottom、margin-leftプロパティが用意されています。
単位について
単位はpx,%,emなどが多く使われるようです。
広告
関連コンテンツ