CSS　ボックスモデル-Dig*Dag

ボックスモデル

CSSでは、それぞれの要素について生成される四角形の領域の事を「ボックス」と表現する。
ボックスは以下の4つの領域から構成される。

• 要素に含まれる内容（contents）


• 内容とボーダーとの余白であるパッディング（padding）


• 枠線を表すボーダー（border）


• ボーダーと他の要素との余白であるマージン（margin）

上図からもわかるとおり、ボックスの幅と高さは以下のように計算される。

• ボックスの幅＝左右のマージン+左右のボーダー+左右のパッディング+コンテンツの幅


• ボックスの高さ＝上下のマージン+上下のボーダー+上下のパッディング+コンテンツの高さ

ボックスモデルの背景

要素に背景を設定した場合、パッティングとボーダーの領域まで適用されるが、マージンの領域には適用されない。
このようにマージンの領域では背景は常に透過(transparent)され、親要素で設定されている背景に依存する事になる。

マージン margin

値は空白文字区切りで複数指定でき、指定する数によって適用対象が異なる。

• 値ひとつ⇒「上下左右」


• 値2つ⇒「上下」と「左右」


• 値3つ⇒「上」と「左右」と「下」


• 値4つ⇒「上」と「右」と「下」と「左」

p{margin: 15px 10px;}
p{margin: 15px 10px 15px;}
p{margin: 15px 10px 15px 10px;}

要素間での上下マージンの相殺

CSSでは、要素の左右マージンは重なり合わず、それぞれのマージンが確保される。
一方、要素間の上下のマージンは重なり合うと解釈され、いずれか大きい方の値がマージンとして設定される。
たとえば、

li{
margin-top :10px;
margin-bottom : 5px;
}

このように指定した場合、一つ目のli要素の下マージン「5px」と、ふたつ目のli要素の上マージン「10px」では、大きい方の値「10px」が実際のマージンとして設定される。

このように、要素間の上下マージンの相殺にはやや複雑な面があるが、次のルールで決定される。

• どちらも正の場合、大きいほうの値をマージンとして設定


• 一方が正の値、他方が負の値の場合、足し引きした値をマージンとして設定


• どちらも負の値の場合、小さい方の値をマージンとして設定

なお、floatプロパティで要素を回り込ませたり、positionプロパティで絶対配置している場合は、上下のマージンについても相殺されない。

マージンとブロックレベル要素のセンタリング

ブロックレベル要素の左右マージンについて、値に「auto」を指定する事で、その要素全体をセンタリングできる。
左右のマージンが自動的に同じ値に設定される事になり、結果的にその要素が中央に寄せられるからである。

div#container[
  width: 760px;
  margin: 0 auto;
}

ただし、一部のブラウザ（Win IE6の過去互換モード）では、左右のマージンに「auto」を指定してもセンタリングされない場合がある。
この問題を避けるには、あわせてbody要素にtext-alignプロパティで「center」を適用しておく。

body{
  text-align: center;
}
div#container{
  margin:0 auto;
}

センタリングに関してWin IE6にはもうひとつ問題がある。
「標準準拠モード」でも「過去互換モード」でも、text-alignプロパティがすべてのブロックレベル要素にも影響してしまう。

つまり上記のようにbody要素にtext-alignプロパティで「center」を適用した場合、直接の子要素である<div id="container">だけでなく、すべての子孫要素がセンタリングされてしまうことになる。
この場合、<div id="container">にtext-alignプロパティを適用し、値の継承を防ぐことで問題を回避できる。

body{
  text-align: center;
}
div#container{
  margin:0 auto;
  text-align: left;
}

• 前の記事：「ひぐらしのなく頃に解　動画　まとめ」
• 次の記事：「CSS classセレクタとidセレクタ」

Comments

What say you?

Track backs

http://digdagdig.blog117.fc2.com/tb.php/150-1022590a

この記事にトラックバックする(FC2ブログユーザー)