余白と境界の仕組み(重要)

スタイルシートでレイアウトを作成する時に、width(横幅)、padding(内余白)、border(境界)、margin(外余白)の意味を理解しておくと、1px単位での細かなレイアウトが可能となります。

paddingとmarginって両方とも余白なのになんで2個もあるの?
borerの太さを変えたら全体のレイアウトがくずれてしまった!

このような経験をお持ちの方も多いかと思います。
たしかに、ブラウザの種類、バージョンによって見栄えが変わるのも事実であり、
そのせいでスタイルシートを敬遠する方も少なくありません。

当初の私自身もよくわからないまま、サンプルコードをコピーペーストしてその場をしのいでいました。

しかし、自分でオリジナルなレイアウトを作成したくなった場合は、以下の図を理解しておくといいかもしれません。width、padding、border、marginの位置関係を表しています。

※widthはコンテンツそのものの横幅
※paddingはborderの内側の余白
※marginはborderの外側の余白
※borderはpaddingとmarginの間の境界線

※重要 【paddngは境界線内側、marginは境界線外側の距離】として覚えてしまいましょう!

枠

例えば、WEBサイト全体を囲むコンテナ(container)の横幅(width)を750pxとした場合、それ以外の何の装飾も行わなければ、横幅は750pxとなります。

#container {
width:750px;
}

その後、境界線をつけてみよう!幅は1pxにしよう!として、以下のようにスタイルを定義すると、

#container {
width:750px;
border:solid 1px #000000;
}

実際の、全体の横幅は、750pxではなく、左の境界線1px、右の境界線1pxを足した752pxとなります。(図の黄色と赤の幅の合計)

paddingも30px設定しよう!となると、

#container {
width:750px;
border:solid 1px #000000;
padding:30px;
}

750px+1px+1px+30px+30pxで合計は812pxとなります。(図の黄色と青と赤の合計)

この状態で、#containerの中に横に2カラム(#content、#sidebar)並べたい場合などは、その2つの横幅の合計の最大値は812pxではなく、750px以下にする必要があります。(図の黄色部分の横幅が合計の最大値)

次のページ >> 上下左右の指定方法

▲ページトップへ