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などが多く使われるようです。

広告