境界と余白

16.4.7. 境界と余白

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

境界の太さと形 #

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

ソース

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

二重線、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-width プロパティ、border-style プロパティとも上、右、下、左の順番に値を指定します。。border-color プロパティも同様の使い方をします。

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

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

ソース

はいぱーワークブック

出力

はいぱーワークブック #

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

ソース

境界の例
出力

境界の例

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

パディング #

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

ソース

枠を描いてみました。
出力

枠を描いてみました。

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

ソース

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

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

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

ソース

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

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

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

マージン #

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

ソース

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

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

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

ソース

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

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

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

ソース

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

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

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

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

ソース

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

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

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

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

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

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

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

ソース

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

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

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

背景の色と画像 境界と余白 箇条書き