マージンを指定する

周囲の要素との間に取る余白のことをマージンといいます。「marginーtop」「magin-bottom」「margin-left」「margin-right」の4つのプロパティがそれぞれ上下左右のマージンを指定するプロパティです。それぞれ、単位を付けて具体的な長さを指定することができます。注意すべきことは、垂直方向のマージンは上の要素の下マージンと下の要素の上マージンの合計値ではなく、両者の内大きいほうになるということです(左右のマージンは左の要素の右マージンと右の要素の左マージンの合計値になる)。

パディングとは直訳すれば「詰め物」のことで、ある要素内に含まれる文字などの内容物の外周(borderプロパティなどで枠線を付けたときはその内側の線)からの距離のことをいいます。「padding-top」「padding-bottom」「padding-left」「 padding-right」がそれぞれ上下左右のパディングを指定するプロパティです。それぞれ、単位を付けて具体的な長さを指定することができます。

マージンをまとめて指定する

4カ所のマージンはmarginプロパティを用いてまとめて指定することができます。marginプロパティには1~4個までの値を指定することができ、それぞれ指定する箇所が決まっています。marginプロパティを用いを行ったのが右のサンプルです。

4カ所のパデイングはpaddingブロパティを用いてまとめて指定することができます。paddingプロパティには1~4個までの値を指定することができ、それぞれ指定する箇所が表のように決まっています。