Padding
パディングは、要素の境界線との間隔を調節します。
マージンのように−値での指定はできません。
●関連プロパティ
絶対値での指定
パディングの値を、絶対値で指定します。
{ padding : length in | length cm | length mm | length pt | length pc | length px }
<p style="padding-top: 20px;">Padding Top 20px</p>
Padding Top 20px
相対値での指定
パディングを相対値で指定します。
テキストの場合、文字の大きさを1emとして、計算されています。
{ padding : length em }
<p style="padding-top: 1em; font-size: 20px;">Padding Top 1em</p>
Padding Top 1em
<p style="padding-left: 2em; font-size: 20px;">Padding Left 1em</p>
Padding Left 1em
パーセントでの指定
パディングをパーセントで指定します。
パーセント場合、親要素のサイズとの相対値で計算されます。
{ padding-top : Percentage }
<p style="padding-bottom: 10%; font-size: 20px;">Padding Top 10%</p>
Padding Top 10%
<p style="padding-right: 20%; font-size: 20px; text-align: right;">Padding Right 20%</p>
Padding Right 20%
自動で指定
Autoで自動的にパディング値が設定されます。
Autoを組み合わせて指定しますと、サンプルのような表示になります。
{ padding : Auto }
<p style="padding: auto auto 20px auto; font-size: 20px;">Padding-top: Auto. Padding-bottom: 20px. Padding-left: Auto. Padding-right: Auto.</p>
Padding-top: Auto. Padding-bottom: 20px. Padding-left: Auto. Padding-right: Auto.
<p style="padding: auto auto auto 40px; font-size: 20px;">Padding-top: Auto. Padding-bottom: Auto. Padding-left: 40px. Padding-right: Auto.</p>
Padding-top: Auto. Padding-bottom: Auto. Padding-left: 40px. Padding-right: Auto.
<p style="padding: auto; font-size: 20px;">Padding-top: Auto. Padding-bottom: Auto. Padding-left: Auto. Padding-right: Auto.</p>
Padding-top: Auto. Padding-bottom: Auto. Padding-left: Auto. Padding-right: Auto.
上パディングの指定
要素の上部パディングを指定します。
サンプルは、オレンジの罫線と要素（テキスト）がパディングの空きです。オレンジとブルーの罫の間はマージンで10px空けています。背景画像の罫線ピッチは、10pxです。
{ padding-top : Absolute Size | Relative Size | Percentage | auto }
<p style="padding-top: 10px; font-size: 20px;">padding Top 10px</p>
padding Top 10px
下パディングの指定
要素の下部パディングを指定します。
{ padding-bottom : Absolute Size | Relative Size | Percentage | auto }
<p style="padding-bottom: 15px;">padding Bottom 15px</p>
padding Bottom 15px
左パディングの指定
要素の左部パディングを指定します。
{ padding-left : Absolute Size | Relative Size | Percentage | auto }
<p style="padding-left: 30px;">padding Left 30px</p>
padding Left 30px
右パディングの指定
要素の右部パディングを指定します。
{ padding-right : Absolute Size | Relative Size | Percentage | auto }
<p style="padding-right: 40px; text-align: right;">padding right 40px</p>
padding right 40px
パディングの指定
要素の4方向のパディングを一括して指定します。
指定には、全指定と簡略指定の4種類あります。個別に指定する場合は、上･右・下・左の順です。3つの場合は上・左右共通・下で、2つですと上下共通・左右共通、1つは4方向共通です。
{ padding : top right bottom left | [ top ] [ right left ] [ bottom ] | [ top bottom ] [ right left ] | [ top bottom right left ] }
<p style="padding: 10px 20px 15px 30px;">padding 10px 20px 15px 30px</p>
padding 10px 20px 15px 30px
パディングの利用例
パディングをカラーボーダーとして利用できます。
<p style="padding: 3px 15px; background-color: rgb(102,102,204); color: white;">
Dynamic HTML Styling
<p style="padding: 15px 15px 3px; background-color: rgb(255,105,0); color: white;">
Dynamic HTML Styling
罫線とパディングの組み合わせ例です。
<p style="padding: 2px 15px; background-color: rgb(255,153,0); color: white; border-right: 2px solid rgb(102,102,255); border-bottom: 2px solid rgb(102,102,255);">
Dynamic HTML Styling
<p style="padding: 0px 0px 2px 4px; border-left:
14pt solid rgb(255,153,0);
border-bottom: 3px solid rgb(255,153,0);">
Dynamic HTML Styling
DIVのパディングについて
DIVタグでのパディングには注意が必要です。
DIV内のテキストなど要素との空きを、要素自体でなくDIVにパディングを指定すると、NN6では異なった表示をする場合があります。
NN6でも同じように表示させる場合は、DIVタグにはパディングを指定しない方が良いかもしれません。
<div style="padding: 20px;">
<p>DIV Tag Padding 20px</p>
</div>
DIV Tag Padding 20px
Netscape 6に対応させる場合
<div>
<p style="padding: 20px;">P Tag Padding 20px</p>
</div>
P Tag Padding 20px
<div>
<p style="margin: 20px;">P Tag Margin 20px</p>
</div>
P Tag margin 20px
 |
 |
|---|
