| プロパティ名 | 値 | 説明 | 適用対象 | 継承 |
|---|---|---|---|---|
| padding-top: | 幅 | 枠線内側の上の余白 | すべての要素 | なし |
| padding-bottom: | 幅 | 枠線内側の下の余白 | すべての要素 | なし |
| padding-left: | 幅 | 枠線内側の左の余白 | すべての要素 | なし |
| padding-right: | 幅 | 枠線内側の右の余白 | すべての要素 | なし |
| padding: | 幅 | 枠線内側の上下左右の余白 | すべての要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 幅 | 単位付数値 | 数値にpx,%,em等の単位を付けます |
| padding: | 枠線内側の余白 |
| padding:値 | 上下左右 |
| padding:値 値 | 上下 左右 |
| padding:値 値 値 | 上下 左右 下 |
| padding:値 値 値 値 | 上 右 下 左 |
padding-top, padding-bottom, padding-left, padding-right, paddingプロパティは、
枠線内側の余白の幅を設定します。
各、上の余白, 下の余白, 左の余白, 右の余白, 上下左右の余白を設定します。 値には、数値にpx,%,em等の単位を付けて指定します。 %で指定した場合には、指定されたボックスを含んだボックスの横幅に対する割合となります、 上下余白の幅についても、横幅を参照しますので、注意してください。
paddingを利用すると、上下左右の余白を一度に設定することができます。 値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように幅が設定されます。
各、上の余白, 下の余白, 左の余白, 右の余白, 上下左右の余白を設定します。 値には、数値にpx,%,em等の単位を付けて指定します。 %で指定した場合には、指定されたボックスを含んだボックスの横幅に対する割合となります、 上下余白の幅についても、横幅を参照しますので、注意してください。
paddingを利用すると、上下左右の余白を一度に設定することができます。 値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように幅が設定されます。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
p{text-align:center;
font-size:1.0em;
background-color:#FFD700;
border:3px solid black;
color:red;
width:500px;
margin-left:auto;
margin-right:auto;
}
b{font-size:1.3em;
color:black;
}
div{font-size:1.0em;
background-color:#F0FFFF;
border:3px solid black;
color:red;
width:300px;
padding:10px;
}
.position{position:absolute;
top:15%;
right:0%;
}
#sampl01{padding:0}
#sampl02{padding:10px}
#sampl03{padding:3%}
#sampl04{padding:1em }
#sampl05{padding-right:10px;
padding-left:20px;
padding-top:0;
padding-bottom:30px;
}
#sampl06{padding:0 10px 30px 0}
-->
</style>
</head>
<body>
<p id="sampl01"><b>上下左右padding 0</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl02"><b>上下左右padding 10px</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl03"><b>上下左右padding 3%</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl04"><b>上下左右padding 1em</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl05"><b>上padding0,下padding30px,左padding20px,右padding10px</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl06"><b>上padding0,右padding10px,下padding30px,左padding0</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<div class="position">同じ幅のボックスでも、paddingの値の大きさにより、ボックスの幅が変わります</div>
</body>
</html>
