marginは、上下左右のマージンを一括して指定できるプロパティです。paddingは、上下左右のパディングを一括して指定できるプロパティです。指定できる値は、半角すページで区切って4つまで指定できます。指定された値の個数と適用されるプロパティの関係はつぎの表のようになります。
| 値の数と適用箇所 | 記述例 |
|---|---|
| 値が1つの場合 | 上下左右 | | margin(padding):5px; |
| 値が2つの場合 | 上下 | 左右 | | margin(padding):5px 10px; |
| 値が3つの場合 | 上 | 左右 | 下 | | margin(padding):5px 10px 3px; |
| 値が4つの場合 | 上 | 右 | 下 | 左 | | margin(padding):5px 15px 3px 10px; |
実数にemやpxなどの単位をつけて指定できます。
実数に半角の%をつけて、指定した要素を含むブロックレベル要素の幅に対する割合で指定できます。上下のマージンの場合も、高さではなく幅に対する割合となりますので注意してください。
自動的に設定します。ブロックレベル要素のマージンを「auto」に設定すると、左右に同じマージンがとられることになり、結果として要素の生成するボックスが中央寄せとなります。