CSS ボックスモデルについて解説

ボックスモデルとは

どの要素も四角い領域を生成します。この四角い領域を「ボックス」といいます。ボックスを作成する要素はブロックレベル要素に限りません。インライン要素もボックスを作成しますがその表示方法が少しブロック要素と異なるところがポイントです。

＊要素とはあるタグで囲まれた内容のすべての（タグを含めて）ことです。

ボックスはテキストや画像などを表示する内容領域（content area）があり、それを囲むパディング（padding）、ボーダー（border）、マージン（margin）といった周辺領域を持ちます。 図示すると次のようになります。

ボックスの幅と高さ

ボックスの幅と高さは次のような計算式で算出されます。

ボックスモデルの背景

要素に背景色または背景画像を設定した場合は内容領域とパディング領域とボーダー領域までが描画されます。しかしながらマージン領域には描画されません。マージン領域は常に透明で親要素の背景色または背景画像が描写されます。
ただし、ルート要素の背景は、ユーザーエージェント（ブラウザ）の表示部分全体の背景となります。それはマージン部分やスクロールバー部分を含みますのでルート要素に設定した背景はマージン部分に表示されます。つまり、パディングを設定したような状態になります。
詳細は「backgroundプロパティをちゃんと知りたい〜CSS2.1 」

マージン

マージンは上下左右に設定できます。

プロパティ

マージン上：margin-top
マージン右： margin-right
マージン下： margin-bottom
マージン左： margin-left

値は数値指定する場合とパーセンテージ指定する場合があります。
数値で指定する場合は必要なマージンを数値で指定しますが、パーセンテージ指定する場合は包含ブロックについて理解する必要があります。
包含ブロックは次に説明予定です。
数値指定、パーセンテージ指定ともマイナス指定が可能です。
また値にautoを使用することができます。これは状況によって自動的に値が決まります。
値をautoにした場合のポイントはインライン要素のマージンの上下左右は０が設定されます。
また、ブロック要素の上下の値をautoにした場合は０として設定されます。

たとえば次のようなp要素を中央揃えするサンプルを用意しました。

<p>1,Lorem ipsum dolor sit amet</p>
<p>2,Lorem ipsum dolor sit amet</p>
<p class="test">3,Lorem ipsum dolor sit amet</p>
<p class="test">4,Lorem ipsum dolor sit amet</p>

p{
	width:360px;
	margin-left:auto;
	margin-right:auto;
}
.test{
	margin:auto;
}

この例はブロック要素を中央揃えする時に使用される定番の方法です。ポイントはwidthで幅を決めておくことです。
サンプルを確認してみると、どの行も中央揃えされているのがわかります。
けれども注意深く見ると、1行目と2行目の行間と3行目と4行目の行間が変わっています。
これは1行目と2行目のp要素には上下のマージンを設定していません。つまり上下のマージンはブラウザのデフォルトのマージン設定がそのまま効いた状態になっています。ところが、3行目と4行目はmargin:autoとして上下左右にautoの値を設定しています。左右のautoは中央揃えの役目を担います。
そして、上下のautoは値を0に設定したことと同様になります。そのためブラウザデフォルトの値は0に書き換えられて行間が変わった訳です。
ちょっと見逃しがちなところですからmargin:autoの記述は十分気をつけましょう。
参考ページ
マージンについて考える 1〜margin-auto

マージンの相殺

マージンの相殺について次のように定義されています。

相互に隣り合っているか、入れ子関係にある複数のボックス間において、間にパディングもしくはボーダー領域を挟まずに隣接するマージンは結合して1つのマージンになります。この現象のことをマージンの相殺といいます。

ちょっとわかりにくい表現ですが、これは通常フローする兄弟要素の垂直方向のマージンは結合されると言っています。そして「間にパディングもしくはボーダー領域を挟まず」とは親子関係のボックスを指しています。親要素にパディングまたはボーダーがないと親子のマージンは結合され、あたかも親要素に子要素のマージンが突き出たかのようになります。この現象はレイアウトを作るときに悩まされる現象ですからしっかりと学習をして身につけておきたいところです。
参考ページ
マージンについて考える２〜相殺
親子要素のマージンの相殺をアニメーションで確認

通常にフローしている複数のブロックボックス間で相殺が行われ、隣接するマージンの最大値が相殺後のマージン幅となります。 正負の値が混在している場合、最大値と最小値を足し合わせた値がマージン幅となり、正の値が存在しない場合は隣接するマージンの最小値がマージン幅となります。

マージンの相殺は水平方向のマージンは相殺されません。
また、 フロートしたボックス間、絶対配置及び相対配置のボックスにおいては、マージンは相殺されません。

パディング

パディングは要素の内容領域とボーダーとの余白です。上下左右にパディングを設定できます。
パディングの値は数値やパーセンテージで指定をすることができますが、マイナスの値は指定できません
W3Cの仕様には値にautoの記述はありません。autoはマージンで使用するようにしましょう。

プロパティ

パディング上：padding-top
パディング右： padding-right
パディング下： padding-bottom
パディング左： padding-left

ボーダー

ボーダープロパティは、ボックスのボーダー領域の幅、色、形式を指定するものです。 これらのプロパティはあらゆる要素（ブロックレベル要素、インライン要素）に適用可能です。

ボーダーの幅

プロパティ

ボーダー上：border-top-width
ボーダー右： border-right-width
ボーダー下： border-bottom-width
ボーダー左： border-left-width

値は次のキーワードを使用するか数値で指定します。マイナスの値はありません。またautoもありません。
thin：細いボーダー
medium：通常のボーダー
thick：太いボーダー
3つの値の解釈はUAに依存しますが、次の関係は守る必要があります。
‘thin’ <= 'medium' <= 'thick'

ボーダーの色

border-colorプロパティはボーダーの色を指定

プロパティ

ボーダー上の色：border-top-color
ボーダー右の色： border-right-color
ボーダー下の色： border-bottom-color
ボーダー左の色： border-left-color

値はcolor指定します。
transparentはボーダーを透明にします（但し幅はあります）

ボーダーの種類

border-styleプロパティはボーダーの種類（実線、二重線、破線など）を指定します。

プロパティ

ボーダー上の色：border-top-style
ボーダー右の色： border-right-style
ボーダー下の色： border-bottom-style
ボーダー左の色： border-left-style

値には以下のものがありますが、ブラウザで表示の変わるものもあります。

none：ボーダーを無しにします。 この値を指定すると’border-width’の算出値は強制的に’0’になります。
hidden：’none’とほぼ同じです。 ただし、表関連要素でボーダーの競合が発生する場合は例外となります。
dotted：ボーダーを点線にします。
dashed：ボーダーを破線にします。
solid：ボーダーを切れ目の無い実線にします。
double：ボーダーを二重線にします。 2本の実線とその間の空白との合計幅が’border-width’の値と等しくなります。
groove：キャンバスの窪みとしてボーダーを表示します。
ridge：’groove’の逆で、キャンバスの隆起としてボーダーを表示します。
inset：ボックスのボーダーより内側全体がキャンバスの窪みになる様に表示します。
outset：’inset’の逆で、ボックスのボーダーより内側全体がキャンバスの隆起になる様に表示します。

ボーダーの種類の設定は規定値がnoneです。そのため他のborder-widthやborder-colorを指定してもボーダーは表示されません。
逆にこの性質を利用してborder-styleをnoneにすることですでに設定しているborderの設定を取り消して非表示にすることができます。