paddingで空間作成
paddingで空間作成
ここでは、スタイルシートの「padding」のプロパティを使用して左側に余白を作る方法を解説します。
padding
前回、「marginを使用して左側に余白を開ける方法」を解説致しましたが、もう一つ「padding」というプロパティを使っても左側に余白を開ける事が出来ます。但し、「padding」と「margin」、この2つの余白の開け方は、全く効果（意味）が違ってくるので、両方とも覚えておきましょう。
早速、実例として見出し4のスタイルにpaddingを入れてみます。「padding」は、タグの外側に余白を指定出来る「margin」に対して、タグの内側に余白を設定出来るプロパティと言えます。スタイルシートは以下のようになります。
h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
border: 1px solid blue;
padding: 0px 0px 0px 20px;
}
これは、前回の「margin」と同じで「複数の値をまとめて指定する方法」を使用しています。paddingの場合、4つ数値を並べると、「上・・・右・・・下・・・左」の順番で数値が適用されます。つまり、ここでは「上と右と下の空白は0ピクセル。つまり無しで左だけ20ピクセル」と指定しています。では、実際に動作を見てみましょう。
見出し4
あまり違いがわかりませんか？それでは、余白を全くしていない見出し4は以下ですので見比べてみてください。
見出し4
では次に、「margin」で左側に余白を指定した見出し4は以下ですので見比べてみてください。
見出し4
青い線で囲んでいるため、比較的わかりやすいと思いますが、「内側」と「外側」の違いがおわかり頂けましたでしょうか？これは、次の「背景画像の指定」の項目で大きく関係してきますので、しっかり覚えておきましょう。
次は「backgroundで背景に画像」です。
この「初めてのホームページ作成」の分類には以下のページがあります。
