今回は、親ボックスの中に、子ボックスを２つネストして、
その２つのボックスのタテの間隔を、定義してみましょう。
「１」と記入されたボックスの定義は、前回の子ボックスと同じです。
ですので、今回は、「２」と記入された青いボックスの定義をしてください。
青いボックスの定義は、
タテヨコの幅は、「１」と記入された赤いボックスと同じ。
背景色は、 #66CCFF です。
そして、この赤と青のボックスのタテの間隔を、20pxあけてみてください。（左からの間隔は、100px）
.box-oya{
width: 300px;
height: 200px;
background-color: #FFCCCC;
color:FFFFFF;
font-weight: bold;
}
.box-red{
width: 20px;
height: 20px;
background-color: #CC0000;
margin:0px 0px 0px 100px;
}
.box-blue{
width: 20px;
height: 20px;
background-color: #66CCFF;
margin:20px 0px 0px 100px;
}
こんなふうに、青いボックス（box-blue）の、
margin属性をいじってあげれば、
２つのボックスの間隔を調節することができます。
ちなみに、２つの子ボックスとも、
左から、100pxの間隔をとっていますが、こういった場合にかぎって、
親ボックスに、パディング属性を定義して、そろえてあげることもできます。
今回は、２つのボックスを例にしているので、
それほど、手間はかからないけど、
もっとたくさんボックスを入れるとなると、
子ボックスに間隔の定義をほどこすより、
親ボックスにパディング属性をつかって、間隔の定義をしてあげましょう。
ひとつひとつの子ボックスに定義するより、親ボックスに定義しておけば、
変更する時も手間がかかりません。
親ボックスに間隔の定義をしてあれば、
親ボックスの定義をいじるだけで、子ボックスとの間隔を調節できるので、手間がカットできます。
