ボックス

Tweet

ホームページ上でコンテンツをまとめる時は、基本的にボックス単位で考えます。

ボックスとはその名の通り「箱」です。左図の様に、テーブル全体も箱、テーブル内の各セルも箱、画像のような空要素も箱、そもそもページ全体が箱と考えられます。

箱ですので、その中にまた箱を入れることが可能です。これが、タグの要素内にまたタグを書く(例：bodyタグ内にtableタグを書く)ということと思って頂ければよいかと。

そのボックスを飾ったり、自分の思い通りに見せるために必要なことを以下で説明していきます。

widthとheight[幅と高さ]

ボックスには幅と高さがあります。
CSSでは幅のことをwidth、高さのことをheightと記述します。

余白

ボックスでは、ボックスの上下左右に余白を取ることが出来ます。
余白はボックス枠外ボックス枠内の2箇所に指定できます。
CSSでは枠外余白をmargin、枠内余白をpaddingと記述します。
その違いは下図を参照下さい。

margin[外余白]

ボックスでは、ボックス枠外の上下左右に余白を取ることが出来ます。
CSSではボックス枠外余白のことをmarginと記します。

上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。

padding[内余白]

ボックスでは、ボックス枠内の上下左右に余白を取ることが出来ます。
CSSではボックス枠内余白のことをpaddingと記します。

上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。