17.4.7 境界と余白

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

境界の太さと形

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

ソース

<div style="border-bottom-style: double; border-bottom-width: 3px;">二重線,3px の境界を下に描く</div>

出力

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

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

境界の色

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

ソース

<div style="border-top-style: dotted; border-top-width: 1px; border-top-color: red;">赤い破線の境界を上に描く</div>

出力

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

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

境界データの一括指定

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

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

ソース

<div style="border-top: 2px solid gray;">グレーの境界を上に描く</div>

出力

グレーの境界を上に描く

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

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

ソース

<div style="border-width: 1px 2px 3px 4px; border-style: dashed dotted double solid;">border-width のテストです</div>

出力

border-width のテストです

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

境界を利用した表現の例

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

ソース

<h2 style="border-left: gray solid 0.5em; background-color: #e0e0e0;">はいぱーワークブック</h2>

出力

はいぱーワークブック


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

ソース

<div style="border-left: gray solid 0.5em; border-bottom: 0.2em solid black;">境界の例</div>

出力

境界の例

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

パディング

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

ソース

<div style="border: 1px solid black;"><div style="border: 1px dotted red;">枠を描いてみました.</div></div>

出力

枠を描いてみました.

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

ソース

<div style="border: 1px solid black; padding: 2px;"><div style="border: 1px dotted red;">ちょっと隙間が空いてますね.</div></div>

出力

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

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

ソース

<div style="border: 1px solid black; padding: 0px 4px 8px 12px;"> <div style="border: 1px dotted red;"> 上, 右, 下, 左の順に 0px, 4px, 8px, 12px のパディングを取りました.</div></div>

出力

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

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

マージン

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

ソース

<div style="border: 1px dotted red;"><div style="border: 1px solid black;">ただ単に div 要素を並べると</div> <div style="border: 1px solid black;">こんな感じで要素の境界はくっつきます.</div></div>

出力

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

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

ソース

<div style="border: 1px dotted red;"><div style="border: 1px solid black;">こっちはそのままですが,下の div 要素に上下左右 10px のマージンを取りました.</div> <div style="border: 1px solid black; margin: 10px;">確かにこのブロック要素の境界の外側に 10px の空きができています.</div></div>

出力

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

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

ソース

<div style="border: 1px dotted red;"><div style="border: 1px solid black;"> 下の div 要素のほうで,上,右,下,左のマージンをそれぞれ 10px, 20px, 30px, 40px に設定しました.</div> <div style="border: 1px solid black; margin: 10px 20px 30px 40px;">余白の幅を見比べてください.</div></div>

出力

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

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

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

ソース

<div style="border: 1px dotted red;"><div style="border: 1px solid black; margin-bottom: 10px;"> margin-bottom を 10px に指定したので,下に 10px のマージンが空きます.</div> <div style="border: 1px solid black; margin-bottom: 10px;">この div 要素にも,下に 10px のマージンが空きます.</div> <div style="border: 1px solid black; margin-top: 10px;">しかしこっちで margin-top: 10px; と指定しても,既に上には 10px のマージンが出来ています.<br> マージンが 20px になったりはしません.</div></div>

出力

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

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

ボックス要素の幅と高さ

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

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

ソース

<div style="width: 300px; height: 50px; border: 1px solid red;">300px x 50px の箱です.</div> <div style="width: 300px; height: 50px; border: 1px solid black; padding: 5px;">パディング 5px です.</div> <div style="width: 300px; height: 50px; border: 1px solid red; margin: 5px;">マージン 5px です.</div> <div style="width: 300px; height: 50px; border: 5px solid black;">境界 5px です.</div> <div style="width: 300px; height: 50px; border: 5px solid red; padding: 5px;">境界, パディング 5px です.</div>

出力

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

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