Purple town

応用編　その６【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パディングをとります。