point パディングを指定する

padding:

指定できる値
スタイルシートでの単位指定
数値にptなどの単位をつけて指定する
キーワードで指定
auto
パーセントで指定

値の指定方法個別に設定するプロパティ
値が一つ上下左右同じ設定padding-top上のみ設定
値が二つ上下、左右の設定padding-left左のみ設定
値が三つ上と左右と下の設定padding-right右のみ設定
値が四つ上、右、下、左の順で設定padding-bottom下のみ設定

パディングを指定するには、paddingプロパティを使います。

ボックスの枠線からそのボックス内のテキストの間隔を指定することができます。ボックスを枠線で囲った場合、このプロパティを付けなければ枠線とテキストの間隔がほとんどなく、非常に読みずらくなってしまいますが、paddingプロパティで適度に間隔をあけることで読みやすくなります。

値の指定方法は、marginプロパティの場合とまったく同じです。1〜4個の値を指定することで4通りの設定が出来ます。

また、「-top」などのキーワード(この場合は、padding-topプロパティ)をつける事によって、上下左右それぞれについて、個別にパディングを設定することが出来ます。

サンプル - Microsoft Internet Explorer

この段落の
上下左右の余白は、25pxです。


この段落の
上下左右の余白は、50pxです。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p      {background-color:orange;}
.test1    { padding: 25px; }
.test2    { padding: 50px;   }
-->
</style>
</head>
<body>
<p class="test1">この段落の<br>
上下左右の余白は、25pxです。</p>
<hr>
<p class="test2">この段落の<br>
上下左右の余白は、50pxです。</p>
</body>
</html>
 

サンプル - Microsoft Internet Explorer

上と下に50px
左と右に20pxの余白を指定しています。


上が10px、
左右が20px、下に50pxの余白を指定しています。


左のみに
50pxの余白を指定しています。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p     {  background-color:orange;
         border-style:solid;
         border-color:gold; }
.test1 { padding: 50px 20px;      }
.test2 { padding: 10px 20px 50px; }
.test3 { padding-left: 50px;      }
-->
</style> </head> <body> <p class="test1">上と下に50px<br> 左と右に20pxの余白を指定しています。</p> <p class="test2">上が10px、<br> 左右が20px、下に50pxの余白を指定しています。 </p> <p class="test3">左のみに<br> 50pxの余白を指定しています。</p> </body> </html>
 

スポンサード・リンク