初心者のためのホームページ作成動画解説付

外枠からの距離、余白について

padding:余白の大きさ

ある要素内にある文字等の外枠からの距離をpaddingで設定できます。
borderのページでは余白を設定しなかったので見栄えが良くないと記述しました。
例えば<p>要素に枠線をつけた場合は、
<p style="border:1px solid #ccccff">初心者のためのホームページ講座</p>
と記述すると下記のように枠線が付きます。

初心者のためのホームページ講座


ただこれでは枠線と文字との間がせまいので窮屈な印象を与えてしまいます。
これを改善するのがpaddingです。
<p style="border:1px solid #ccccff;padding:10px">初心者のためのホームページ講座</p>
と記述することによって、余白を設定でき見栄えが良くなります。

初心者のためのホームページ講座

つまり、padding:10pxと記述すると上下左右のすべての枠線からの距離が10px設定されることになります。
例えば、枠線の下だけに余白を入れたい場合はこのように記述します。
<p style="border:1px solid #ccccff;padding-bottom:10px">初心者のためのホームページ講座</p>

初心者のためのホームページ講座


これではセンス悪いですが・・・(^^;)


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
<p style="border-left:5px solid #55f;border-bottom:1px solid #55f">初心者のためのホームページ講座</p>

初心者のためのホームページ講座


<p style="border-left:5px solid #55f;border-bottom:1px solid #55f;padding:5px">初心者のためのホームページ講座</p>

初心者のためのホームページ講座


多少良くなったでしょ(^^)?
結局はボックスモデルを覚えましょうということで・・・