HTMLとCSSで作成する入れ子のボックスを作成する時の注意点を整理しました。今回はmargin処理です。通常はfloat等で処理するので、こんな使い方はあまりしないのですが、コレが理解出来ないと思わぬトラブルが出てしまいます。まずは以下が上図のソースとなります。マゼンタの300pixel四方、グレーの200pixel四方、黄色の100pixel四方を<div>配置しています。全てが左上に揃ってしまいセンター合わせには成りません。
----------------------------------
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<title>margin & padding& & border</title>
<link rel="stylesheet" type="text/css" href="rule.css">
</head>
<body>
<div id="hotpink_box">
<div id="silver_box">
<div id="gold_box">
</div>
</div>
</div>
</body>
</html>
----------------------------------
/* rule.css */
@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
border: 0px;
background-color: #afeeee;
}
#hotpink_box {
margin: 0px;
padding: 0px;
border: 0px;
width : 300px;
height: 300px;
background-color : #ff69b4;
}
#silver_box {
margin: 0px;
padding: 0px;
border: 0px;
width : 200px;
height: 200px;
background-color : #c0c0c0;
}
#gold_box {
margin: 0px;
padding: 0px;
border: 0px;
width : 100px;
height: 100px;
background-color : #ffd700;
}
----------------------------------
ここで、rulr.cssの#hotpink_box、css上の#silver_boxと#gold_boxのmargin設定を以下の様に変更する事で上図のようになります。ただし、上下関係がセンターになっていません。
margin: 0px auto;
上下関係がセンターにするために、css上の#silver_boxと#gold_boxのmargin設定を以下の様に変更します。それぞれのボックスのサイズから、上下の空きは50pxだからです。しか上図のように計算上の結果にはなりません。これは<div>がお互いに干渉しているからだそうです。
margin: 50px auto;
そこで、お呪いとしてhtml上の以下の部分の最後に<br>を追加します。論理的にはこれで問題無いのですが、<br>の分だけそれぞれの<div>が下がっているコトを計算に入れなくては成りません。
<div id="hotpink_box">
<div id="silver_box">
↓
<div id="hotpink_box"><br>
<div id="silver_box"><br>
marginで前後関係を0pxにすると上図のように隙間が空いてしまいます。
margin: 26px auto;
（※）ブラウザのデフォルトの文字サイズが16pxであり、<br>1つにつき、行間が半分追加されるので、（16+（16/2）=24）となります。よって、各<div>の中で16px以外の文字サイズを利用する場合はそれに留意する必要があります。
