margin、padding、そしてborder

ブラウザに表示されるHTML要素は、上の図のような構造になっています。中央の青い部分にテキストが表示されます。その外側にpadding、そしてborderがあります。ここまでが要素そのものです。その外側にはmarginとpositionがあります。

positionは、親要素に対する位置を指定するプロパティです。詳しい説明は別の機会にします。

border …… 「境界線」の意。要素の外枠です。デフォルトでは表示されませんが、ちゃんと存在しています。CSSのborderプロパティで太さや色などを指定できます。

例
p {border:solid 2px red;}

この例では、p要素(セレクタ)に対して「一本線(solid)、太さ2px、赤色」のborderを設定しています。

margin …… 「余白」の意。要素の外側に設定され、他の要素との間隔を調整します。

例
p {margin:10px;}

この例では、p要素に対して「上下左右に10pxずつ」のmarginを設定しています。

padding …… 「詰め物」の意。テキスト部分とborderとのあいだにある空間を調整します。

例
p {padding:10px;}

この例では、p要素に対して「上下左右に10pxずつ」のpaddingを設定しています。

上下左右のいずれかにだけ設定したい場合は、border-top(上にのみborderを設定)、margin-bottom(下にのみmarginを設定)、padding-right(右にのみpaddingを設定)のように書くことができます。

また、marginとpaddingにはこのような書き方もあります。

margin:10px 8px 12px 7px;
padding:10px 8px 5px;
margin:10px 8px;

一番上の例では、上に10px、右に8px、下に12px、左に7pxのmarginを設定しています。

真ん中の例では、上に10px、左右に8px、下に5pxのpaddingを設定しています。

一番下の例では、上下に10px、左右に8pxのmarginを設定しています。

上下左右に異なる値のmargin(padding)を設定できるので、ぜひ覚えましょう。

コメント

  1. […] margin、padding、そしてborderブラウザに表示されるHTML要素は、上の図のような構造になっています。中央の青い部分にテキストが表示されます。その外側にpadding、そしてborderがあります。 […]

タイトルとURLをコピーしました