内側の余白
内側の余白は、表のセルやDIV等で使用されます。また段落やタイトルなどを枠線で囲む場合の枠線内の余白にも利用できます。
- padding-top（内側の余白上）
- padding-bottom（内側の余白下）
- padding-left （内側の余白左）
- padding-right（内側の余白右）
- padding（内側の余白一般）
padding-top（内側の余白上）
padding-topとは、上のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナス を指定することができません。初期値は0です。
| 書式 | padding-top: <value:値> |
|---|---|
| 値 | <length> |<percentage> |
| 初期値 | 0 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
padding-topプロパティーは、top borderとセレクターの内容の間にどの位の空白を置くかを記載します。値はlengthかpercentageです。
パーセント値は親要素の幅を参照します。マイナス はゆるされません.
<head>
<title>padding-top</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p style="padding-top:3cm; border:thin solid black;"> その後5年ほどはＨＴＭＬの仕様自体が日進月歩で変化を続け、次々に新しい機能が追加されてきました。それをいち早く取り入れて、一人悦に入っていたものです。</p>
</body>
</html>
padding-bottom （内側の余白下）
padding-bottomとは、下のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナス を指定することができません。初期値は0です。
| 書式 | padding-bottom: <value:値> |
|---|---|
| 値 | <length> |<percentage> |
| 初期値 | 0 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
padding-bottomプロパティーで、bottom borderとセレクターの内容の間にどの位の空白を置くかを記載します。値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナス は許されません。
その後5年ほどはＨＴＭＬの仕様自体が日進月歩で変化を続け、次々に新しい機能が追加されてきました。それをいち早く取り入れて、一人悦に入っていたものです。<p style="padding-bottom:3cm; border:thin solid black;"> それもここ2年ぐらいは、ＨＴＭＬ自体の仕様は止まっており、新たにスタイルシートが追加されたぐらいでしょうか、さらに２００３年ごろからは、ＸＨＴＭＬ、ＸＭＬ等と新しいマークアップ言語が取り上げられてきました。これらは殆どが ビジネスや学術の世界での必要性からですが、個人の趣味の世界では、殆ど関係の無い世界です。Textabsatz mit sichtbarem
</p>
padding-left （内側の余白左）
padding-leftとは、左のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナス を指定することができません。初期値は0です。
| 書式 | padding-left: <value:値> |
|---|---|
| 値 | <length> |<percentage> |
| 初期値 | 0 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
padding-leftプロパティーで、left borderとセレクターの内容にどの位の空白を置くかを記載します。値は、lengthかpercentageです。パーセント値は親要素の幅を参照します。マイナス は許されません
<head>
<title>padding-left</title>
<style type="text/css">
#p1 {padding-left: 100px;
background-color:#FFFF99;
font-size:14pt; }
#p2 { padding-left: 200px;
background-color:#FFFF99;
font-size:14pt; }
#p3 {padding-left: 300px;
background-color:#FFFF99;
font-size:14pt; } </style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p id="p1">padding-left: 100px p1</p>
<p id="p2">padding-left: 200pxz p2</p>
<p id="p3">padding-left: 300px p3</p>
</body>
</html>
padding-right （内側の余白右）
padding-rightとは、右のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナス を指定することができません。初期値は0です。
| 書式 | padding-right: <value:値> |
|---|---|
| 値 | <length> |<percentage> |
| 初期値 | 0 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
padding-rightプロパティーで、right borderとセレクターの内容の間の空白をどのくらいにするかを記載します。値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナス は許されません。
<head>
<title>padding-right</title>
<style type="text/css">
#d1 {padding-right: 50px;
background-color:#FFFF99; font-size:14pt; }
#d2 {padding-right: 100px;
background-color:#99FFFF; font-size:14pt; }
#d3 { padding-right: 150px;
background-color:#FF99FF; font-size:14pt; } </style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="d1">padding-right: 50px d1
<div id="d2">padding-right: 100px d2
<div id="d3">padding-right: 150px d3
</div></div></div>
</body>
</html>
padding （内側の余白一般）
paddingとは、上下左右のパディングに関する設定を一括して指定するためのプロパティです。値がひとつだけのときには全てのマージンを等しく指定しますが、値の数によって上下と左右のそれぞれを等しく指定したり、左右のみを等しく指定したり、あるいは全てのパディングに異なる値を指定できます。値は数値に単位をつけて指定しますが、マイナス は指定できません。
| 書式 | padding: <value:値> |
|---|---|
| 値 | [<length> |<percentage> ]{1,4} |
| 初期値 | 0 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
paddingプロパティーは、padding-top・padding-right・padding-bottomとpadding-leftプロパティイーの短縮型です。要素のパディングは、borderと要素の内容の間の空白の量です。一から四の値が与えられ、各値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナス は許されません。四つの値があるなら、それぞれ上部・右側・下部・左側パディングです。一つの値なら、全ての側に適用されます。二または三の値が与えられるなら、見えない値は反対側から取られます。
例えば、以下の規則は上部パディングを2emに、右側パディングを4emに、下部ッパディングを5emに、左側パディングを4emに設定しています：
padding-toppadding-bottompadding-left
padding-right
style="border:2cm solid #DDFFCC;
padding:50px; font-size:18pt">
その後5年ほどはＨＴＭＬの仕様自体が日進月歩で変化を続け、次々に新しい機能が追加されてきました。それをいち早く取り入れて、一人悦に入っていたものです。
</p>
目的別属性
広告