HOME >> スタイルシート > パディングを指定する

　パディングを指定する

■

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>
<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>
<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>

HOME >>スタイルシート

次のページ >>