幅と高さを指定する

幅はwidthプロパティ、高さはheightプロパティで指定する。

サイズの指定における基礎知識

下のボックスは幅500px、高さ300pxで指定。
見やすくするために背景色を設定。

水色がボックス（親要素）、うすい黄色が子要素をあらわしている。

相対単位と絶対単位

相対単位とは基準にするサイズによって大きさが変化する。

• % : 親要素を基準としたときの割合の単位
• em : 親要素のサイズを基準にした単位
• rem : ルート要素のサイズを基準に計算される単位
• vw : 画面表示領域の幅を基準とした割合の単位
• vh : 画面表示領域の高さを基準とした割合の単位

余白を指定する

余白の概念は理解するには、ひとつの要素を箱と見立てるとわかりやすくなる。

箱と箱の距離をあらわすのがマージン(margin)である。
箱の間隔を調整するときに使う。

箱のふちから中身までの距離をあらわすのがパディング（padding）である。
箱の中に間隔を指定するときに使う。

margin プロパティ

• margin: 10px;
  → 4辺すべてに10pxのマージン
• margin-top: 10px;
  → 要素の上に10pxのマージン
• margin-bottom: 10px;
  → 要素の下に10pxのマージン
• margin-left: 10px;
  → 要素の左に10pxのマージン
• margin-right: 10px;
  → 要素の右に10pxのマージン

margin: 10px 20px 30px 40px; と指定した場合
マージン：上10px 右20px 下30px 左40pxとなる

マージンを適用しています。

padding プロパティ

設定の仕方はmarginと同じ。

通常の設定のままpaddingを設定すると
要素の大きさがpaddingを含んだ分だけ大きくなる。

上の画像は幅が500px + 100pxで600px
高さが300px + 50pxで350pxになっている。

サイズを維持したままpaddingを設定する

全体の要素「*」もしくはbodyタグに「box-sizing: border-box;」を設定する。

上の例は、paddingが含まれてもサイズが維持されている。