ボックスとは、各要素ごとに設定される四角い領域のことをいいます。
この領域は4つの部分から構成されています。

他のボックスとの領域:margin 枠線：border ボックスと内容の間の領域：padding 内容：content

この領域に、要素を構成する内容のテキストや画像などが表示されます。
この領域の大きさが各サイズの基準となり、widthプロパティとheightプロパティを使って大きさを指定します。

ボックスと内容を表示する間の領域です。
枠線と内容が接近しすぎないようにするときにこの領域を調節します。
この領域は透明なので、下の背景色や背景画像が透けて見えます。

ボックスの周りに表示する枠の部分です。

他のボックスとの間の領域です。
この部分には要素に対して指定された背景色や背景画像が表示されないので常に透明になります。
隣接する他のボックスがない場合は、親要素のボックスとの間隔になります。


<STYLE type="text/css">
<!--
.case1 {
border : solid 20px #8f9f60 ;　　← 枠線の指定
padding : 30px ;　　　　　　　　← paddingの指定
margin : 30px ;　　　　　　　　 ← marginの指定
background-color : #f3f3fb;　　 ← 背景色の指定
}
-->
</STYLE>

<DIV class="case1">
<DIV><IMG src="img/neko.jpg" width="240" height="180" border="0"><BR>
<B>猫がやってきたとき</B><BR>
待ちに待った猫が我が家にやってきたからといって、<BR>
かまいすぎるのは避けましょう。 <BR>
人間でもはじめての家に行くと緊張するものです。</DIV>
</DIV>