応用編　その６【margin＆padding】

応用編　スタイル宣言　その６　マージンとパディング【margin＆padding】

マージン（margin）は領域間のスペース、パディング（padding）は領域内のスペースの事です。

この二つの要素を利用してテーブルタグを使わずに囲みスペースを作ってみましょう。値には約束事があります。

値が１つの場合、指定した値が［上下左右］になります。
値が２つの場合、順番に［上下］［左右］になります。
値が３つの場合、順番に［上］［左右］［下］になります。
値が４つの場合、順番に［上］［右］［下］［左］になります。

top（上）、bottom（下）、left（左）、right（右）を指定して一部のみに指定を入れることも出来ます。
パディングには負の値を指定することはできませんがマージンには負の値を指定することができます。

<div style="background-color:#f8dce0;margin-top:20px;">20px上にマージンをとります。</DIV>

20px上にマージンをとります。

<div style="background-color:#f8dce0;padding-top:20px;">20px上にパディングをとります。</DIV>

20px上にパディングをとります。

<div style="background-color:#f8dce0;margin:20px10px;padding:20px;">上下20pxと左右10pxのマージンと20pxパディングをとります。</DIV>

上下20pxと左右10pxのマージンと20pxパディングをとります。

<div style="background-color:#f8dce0;margin:5px 20px 30px 50px;">上5px・右20px・下30px・左50pxのマージンをとります。</DIV>

上5px・右20px・下30px・左50pxのマージンをとります。

<div style="background-color:#f8dce0;margin:5px 20px 30px 50px;padding:10px;">上5px・右20px・下30px・左50pxのマージンと10pxパディングをとります。</DIV>

上5px・右20px・下30px・左50pxのマージンと10pxパディングをとります。

マージンだけでは隙間がないのでパディングと併用して空間を作りましょ。