16.4.7. 境界と余白

ボックス要素の境界と余白をコントロールする方法を説明します。

境界の太さと形 #

境界を描くには、まず境界の形を指定しなければいけません。形の指定は border-top-style, border-bottom-style, border-left-style, border-right-style で上下左右独立に指定することができます。また境界の太さは、形同様 border-top-width プロパティなどで上下左右それぞれ指定することが出来ます。

ソース

二重線、3px の境界を下に描く

border-style の値には solid (実線), dotted (点線), dashed (鎖線), double (二重線), inset, groove(埋め込み), outset, ridge(盛り上がり)などがあります。長さの細かい指定のしかたは 16.4.9. 補足 を参照してください。

境界の色 #

境界の色は、border-top-color プロパティなどで上下左右独立に指定できます。

ソース

赤い破線の境界を上に描く

色の指定について詳しいことは 16.4.9. 補足 を参照してください。

境界データの一括指定 #

border の上下左右にそれぞれ形・太さ・色を指定するのは面倒なので、それらを一括指定する方法が用意されています。

まず border-top プロパティを用いると、上の境界の形・太さ・色を一括指定することができます。

ソース

グレーの境界を上に描く

指定する順番は太さ・形・色の順です。形以外の値は省略することができます。もちろん border-bottom, border-left, border-right プロパティも同様に使うことができます。さらに border プロパティというものがあり、これを使うと上下左右の境界の太さ・形・色を同時に指定することができます。

これとは別に border-width プロパティを使うと、上下左右の境界の太さを一度に指定することができます。

ソース

border-width のテストです

border-width プロパティ、border-style プロパティとも上、右、下、左の順番に値を指定します。。border-color プロパティも同様の使い方をします。

境界を利用した表現の例 #

境界を背景色をうまく用いると、はいぱーワークブックでおなじみの表現ができます。

ソース

はいぱーワークブック

はいぱーワークブック #

また、下と左の境界だけつけると次のような感じになります。

ソース

境界の例

このような表現はいかに CSS が強力であるかを端的に示す良い例です。これらの表現は CSS なくして実現させることはできません。

パディング #

パディングとはボックス要素の内側の余白のことです。まず次の例を見てください。

ソース

枠を描いてみました。

外側の div 要素と内側の div 要素の境界はぴったりくっついています。このように、ただ枠を描くと内側に余白はできません。内側の余白を設定するには padding プロパティを使います。たとえば padding: 2px; とすると、上下左右に 2 ピクセルの余白ができます。上と見比べてみてください。

ソース

ちょっと隙間が空いてますね。

この例では一律に 2px のパディングを取りましたが、padding プロパティに 4 つの値を指定すると、上下左右のパディングを別々に指定することができます。

ソース

上, 右, 下, 左の順に 0px, 4px, 8px, 12px のパディングを取りました。

また padding-top, padding-bottom, padding-left, padding-right プロパティを使うことで、上下左右個別に padding を決めることができます。

マージン #

マージンはパディングと逆で、ブロック要素の外側の余白を表します。まず最初に、余白のない例を見てみましょう。

ソース

ただ単に div 要素を並べるとこんな感じで要素の境界はくっつきます。

margin プロパティを指定すると、上下左右の方向に余白が指定できます。

ソース

こっちはそのままですが、下の div 要素に上下左右 10px のマージンを取りました。確かにこのブロック要素の境界の外側に 10px の空きができています。

padding プロパティと同様、4 つの数字を指定することで上下左右のマージンを個別に指定できます。指定する順番は上、右、下、左の順です。

ソース

下の div 要素のほうで、上、右、下、左のマージンをそれぞれ 10px, 20px, 30px, 40px に設定しました。余白の幅を見比べてください。

パディングと同様  margin-top, margin-bottom, margin-left, margin-right プロパティも使えます。

なおマージンはボックス要素の外側の余白ですが、より正確に言うと「最低限確保しなければならない」余白です。次の例を見てください。

ソース

margin-bottom を 10px に指定したので、下に 10px のマージンが空きます。この div 要素にも、下に 10px のマージンが空きます。しかしこっちで margin-top: 10px; と指定しても、既に上には 10px のマージンが出来ています。

マージンが 20px になったりはしません。

このように、マージンの確保は足し算にはなりません。同じ場所に対して複数の方法でマージンを指定した場合、マージンの幅はそれらの最大値で決まります。気をつけてください。

ボックス要素の幅と高さ #

ボックス要素の幅と高さは、それぞれ width, height プロパティで指定できます。しかしここまで説明してきたように、ボックス要素にはマージン、パディングと境界の幅を指定することができます。width と height はどこの長さを表すのでしょうか？

これを確かめるため、次の例を見てください。

ソース

300px x 50px の箱です。パディング 5px です。マージン 5px です。境界 5px です。境界, パディング 5px です。

この例で分かりますが、width と height で指定されるのは一番内側の文字が書かれる領域の幅と高さです。width, height と margin, padding, border-width の位置を図で描くと次のようになります。