padding-top,right,bottom,left:要素の内側の余白を個別に指定する
適用対象 | 全ての要素(テーブルの内部要素以外) |
継承 | しない |
padding-top,right,bottom,leftプロパティは、要素の指定した辺に内部余白を設定する際に使用します。マイナス値を指定することもできますます。
パディングを一括で指定したい場合には、paddingを使用します。
padding-top,right,bottom,leftに与えられる値
- padding-top,right,bottom,left: 値;
- [px]や[em]などの単位で余白を取る場合に使用します。
- padding-top,right,bottom,left: 値%;
- 親要素の幅に対して%値で余白を指定する場合に使用します。
padding-top,right,bottom,leftの使用サンプル
CSS
.sample_box { border: 1px solid #666666; padding-top: 10px; padding-right: 100px; padding-bottom: 20px; padding-left: 10px; } .box_sample01 { border: 1px solid #666666; background-color:#FFE4B5; padding-top: 5px; padding-bottom: 10px; padding-left: 10px; margin: 0px 0px 10px 0px; } .box_sample02 { border: 1px solid #666666; background-color:#FFE4B5; padding-top: 2em; padding-bottom: 2em; padding-left: 2em; }
XHTML
<div class="sample_box"> <div class="box_sample01"> box_sample01<br /> [padding-top: 5px;]<br /> [padding-bottom: 10px;]<br /> [padding-left: 10px;]<br /> paddingサンプル<br /> </div> <div class="box_sample02"> box_sample02<br /> [padding-top: 2em;]<br /> [padding-bottom: 2em;]<br /> [padding-left: 2em;]<br /> paddingサンプル<br /> </div> </div>
表示確認
text_sample01
[padding-top: 5px;]
[padding-bottom: 10px;]
[padding-left: 10px;]
paddingサンプル
[padding-top: 5px;]
[padding-bottom: 10px;]
[padding-left: 10px;]
paddingサンプル
text_sample02
[padding-top: 2em;]
[padding-bottom: 2em;]
[padding-left: 2em;]
paddingサンプル
[padding-top: 2em;]
[padding-bottom: 2em;]
[padding-left: 2em;]
paddingサンプル
padding-xに関連するCSSプロパティ
余白の指定 | |
---|---|
margin | 要素の外側の余白(マージン)を指定する |
margin-bottom | 要素の底辺に当たる外側の余白(マージン)を指定する |
margin-left | 要素の左辺に当たる外側の余白(マージン)を指定する |
margin-right | 要素の右辺に当たる外側の余白(マージン)を指定する |
margin-top | 要素の上辺に当たる外側の余白(マージン)を指定する |
padding | 要素の内側の余白を指定する |
padding-bottom | 要素の内側の底辺側に当たる余白を指定する |
padding-left | 要素の内側の左辺側に当たる余白を指定する |
padding-right | 要素の内側の右辺側に当たる余白を指定する |
padding-top | 要素の内側の上辺側に当たる余白を指定する |