初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL5. Box に関する設定　その1 ★ マージンとパディング

１．マージンとパディングを個別に設定する

内容領域の周囲の余白は、枠線から内側と外側へ向けて、以下のように個別のプロパティで設定できます。

それぞれの<値>は、以下の例のように「数値+単位」で指定します。スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。

ex1. body周囲 のマージンをピクセルで指定

body { margin-top: 30px;

margin-right: 50px;

margin-bottom: 30px;

margin-left: 50px; }

ex2. p 周囲 のパディングをパーセントで指定

p { padding-top: 10%;

padding-right: 15%;

padding-bottom: 15%;

padding-left: 15%; }

２．マージンとパディングを一括して設定する

個別に指定する他にも、プロパティを「margin: 」「padding: 」だけにして「数値+単位」を横に並べ、一括して設定することもできます。この場合、横に並ぶ「数値+単位」の数によって、それぞれがどの部分を指定するかが予め定められています。

margin（padding）: <上> <右> <下> <左>;  ・・・「数値+単位」を4つ並べると、この順で各部分の余白が決まります。

margin（padding）: <上> <左右> <下>;  ・・・「数値+単位」を3つ並べると、この順で各部分の余白が決まります。

margin（padding）: <上下> <左右>;  ・・・「数値+単位」を2つ並べると、この順で各部分の余白が決まります。

margin（padding）: <上下左右全て同じ>; ・・・「数値+単位」を1つだけ書くと、全ての余白が同じ幅で表示されます。

先のex1. ex2. を、この書き方で一括指定すると、以下のようになります。

ex1. body { margin: 30px 50px; }

ex2. p { padding: 10% 15% 15%; }

ただし、上下に接している要素のマージンは、自動的に大きい数値が選択されて小さい方の値は無視されますので注意が必要です。また、「margin: 」「padding: 」ともに、「数値+単位」の代わりに「auto」を指定するとブラウザが独自に判断して余白を設定します。

初級篇2.VOL４.ＣＳＳにおける「BOX概念」とは? <<

>> 初級篇2.VOL５.Boxに関する設定その2-1