Cascading Style Sheets padding property.
paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。 上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
パディングはマージンとセットで覚えるのが良いと思います。
マージン10px
パディング10px
マージン10px、パディング10px
マージンは領域間のスペース、パディングは領域内のスペースです。
尚、パディングには負の値を指定することはできません。
このサンプルでは上下左右にまとめて10pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上下左右にまとめて30pxのマージンと、10pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上下10px、左右20pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上10px、左右20px、下30pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上10px、右20px、下30px、左40pxのパディングを指定しています。パディングには負の値を指定することはできません。
HTML sample
<p class="sample1">このサンプルでは上下左右にまとめて10pxのパディングを指定しています。パディングには負の値を指定することはできません。</p>
<p class="sample2">このサンプルでは上下左右にまとめて30pxのマージンと、10pxのパディングを指定しています。パディングには負の値を指定することはできません。</p>
<p class="sample3">このサンプルでは上下10px、左右20pxのパディングを指定しています。パディングには負の値を指定することはできません。</p>
<p class="sample4">このサンプルでは上10px、左右20px、下30pxのパディングを指定しています。パディングには負の値を指定することはできません。</p>
<p class="sample5">このサンプルでは上10px、右20px、下30px、左40pxのパディングを指定しています。パディングには負の値を指定することはできません。</p>
CSS sample
p.sample1 {
background-color: #f19ec2;
padding: 10px;
}
p.sample2 {
background-color: #f19ec2;
margin: 30px;
padding: 10px;
}
p.sample3 {
background-color: #f19ec2;
padding: 10px 20px;
}
p.sample4 {
background-color: #f19ec2;
padding: 10px 20px 30px;
}
p.sample5 {
background-color: #f19ec2;
padding: 10px 20px 30px 40px;
}