内容の周りの空間を設定する

padding-top: 幅
 ⇔　上の空間
padding-bottom:　幅
 ⇔　下の空間
padding-left:　幅
 ⇔　左の空間
padding-right:　幅
 ⇔　右の空間
padding:　幅
 ⇔　上・右・下・左の空間

幅　　　　単位付きの数値・％

これらのプロパティは、内容を表示する領域と枠線の間の空間の幅を設定します。
％で指定した場合には指定されたボックスを含んだボックスの横幅に対する割合となります。
上下の空間の幅についても、高さではなく横幅を参照しますので注意しましょう。
「padding」を利用すると、上下左右の幅を設定することが出来ます。
その場合値を半角スペースで区切って指定しますが、与えられた値の個数によって
次の様に幅が設定されます。
●値が１つの場合
●値が２つの場合
●値が３つの場合
●値が４つの場合		 値１⇒上下左右
値１⇒上下　値２⇒左右
値１⇒上　値２⇒左右　値３⇒下
値１⇒上　値２⇒右　値３⇒下　値４⇒左

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #ff6600;
margin: 0
}
p {
font-weight: bold;
border: solid 3px #000000;
color: #ffffff;
background: #ff3300
}
#sample1 { padding: 5 }
#sample2 { padding: 20px }
#sample3 { padding: 40px }
#sample4 { padding-right: 50% }
#sample5 { padding-left: 50% }
h1 { text-align: center }
em { color: yellow }
-->
</style>
</herd>
<body>
<h1>内容の周りの空間を設定する</h1>

<p id="sample1">
この段階では、内容と枠線の間を上下左右とも5ピクセルに設定しています。
<em>解り易いように折り返すまで文字を入れてみました。折り返すまで文字を入れてみました。</em>
</p>
<p id="sample2">
この段階では、内容と枠線の間を上下左右とも２０ピクセルに設定しています。
<em>解り易いように折り返すまで文字を入れてみました。折り返すまで文字を入れてみました。</em>
</p>
<p id="sample3">
この段階では、内容と枠線の間を上下左右とも４０ピクセルに設定しています。
<em>解り易いように折り返すまで文字を入れてみました。折り返すまで文字を入れてみました。</em>
</p>
<p id="sample4">
この段階では、右側の内容と枠線の間を５０％に設定しています。
<em>解り易いように折り返すまで文字を入れてみました。折り返すまで文字を入れてみました。</em>
</p>
<p id="sample5">
この段階では、左側の内容と枠線の間を５０％に設定しています。
<em>解り易いように折り返すまで文字を入れてみました。折り返すまで文字を入れてみました。</em>
</p>

</body>
</html>