div.boxA{margin:10px 0;}
div.boxB{margin:10px 0;}

<div class="boxA">●●●</div>
<div class="boxB">●●●</div>

boxAもboxBも上下10pxのマージンを設定していることから単純に計算するとboxAとboxBの間には20pxのマージンがあることになります。
しかし、ここでマージンの結合が発生！実際は10pxとなります。以下に発生条件と適用値を列記します。

条件：　隣接または入れ子の関係にある複数のボックスであること。
適用値：　一般的な配置（position:static;）の場合以下参照。

1. [正の値]｜[正の値]　───　最大値
2. [正の値]｜[負の値]　───　最大値と最小値の和
3. [負の値]｜[負の値]　───　最小値

※float設定したボックス、絶対配置（position:absolute or fixed;）には適用されません。
※水平方向のマージンには適用されません。

この回避にはfloat指示された直下のボックスには必ずclear指示を与える、またはあるボックス内部で完結させる、というようにしています。

例1
<div id="sampleBOX">
　<div lass="left">左に回りこみ </div>
　<div lass="left">左に回りこみ </div>
</div>

例2
<div lass="left">左に回りこみ </div>
<div lass="left">左に回りこみ </div>
<div lass="sampleBOX> </div>

css
#sampleBOX{clear:both;}
.left{float:left;}

一般的に見出しとなるh2やh3には回り込みは不要と考えていますので、共通内容記述のcommon.cssにてh1,h2,h3{clear:both;}という基本設定をしています。これにより回り込みによるレイアウト崩れの防止になります。

＜clearプロパティの値＞
left ・・・左寄せされた要素に対する回り込みを解除。
right ・・・右寄せされた要素に対する回り込みを解除。
both ・・・全ての要素に対する回り込みを解除。
none ・・・デフォルト。回り込みを解除せず。

●margin、padding

[4つの値を指定]　margin:上　右　下　左 ;
[3つの値を指定]　margin:上　左右　下 ;
[2つの値を指定]　margin: 上下　左右 ;
[1つの値を指定]　margin: 上下左右 ;
・単位はpx、%、emなど

ちなみに、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。

●background

background:　 色　 ｜ 画像 ｜  リピート指定  ｜ 表示指定  ｜ 左右位置  ｜上下位置
初期値　　　　　 透明 ｜ なし  ｜ repeat　　      ｜ scroll 　    ｜ 0px　　    ｜0px

色　：　#fff
画像　：url(sample.gif)
リピート指定　：　repeat｜no-repeat｜repeat-x｜repeat-y
表示指定　：　scroll｜fix
左右位置　：　数値指定(px、%、em)　left｜center｜right
上下位置　：　数値指定(px、%、em)　top｜center｜bottom

左右位置と上下位置については注意が必要です。leftなどキーワード指定では順不同ですが、数値の場合には上記順番になります。
また数値入力の場合表示位置を左、または上からのオフセットとなります。どの値についても省略可能。

●border

border:　　　線幅　 ｜　線種　 ｜　色　    ;
初期値　　　ブラウザ｜　solid　｜　ブラウザ

線幅：数値（px,em）
色： #ccc
線種：
solid （1本線）、
double（2本線）、
dashed（破線） 、
dotted（点線）、
groove （立体的に窪んだ線）、
ridge （立体的に隆起した線）、
inset （上と左のボーダーが暗く、下と右のボーダーが明るく表示され、囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部指定では不可。 ）
outset（上と左のボーダーが明るく、下と右のボーダーが暗く表示され、囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部指定では不可。）

active　    全角日本語を指定 (半角/全角キー有効)
inactive　半角英数を指定  (半角/全角キー有効)
disabled　半角英数に固定 (半角/全角キー無効)
auto　         ブラウザの入力モードを引き継ぐ（デフォルト）

記述例
input { ime-mode : active ;  }
input { ime-mode : inactive ;  }
input { ime-mode : disabled ;  }

動作確認

●active　

●inactive　

●disabled　

@import url("reset.css");
@import url("common.css");
@import url("home.css");

reset.cssはすべての要素を初期化する記述内容。
*(ワイルドカード)でもよいのですがCSSを分けるメリットが他にもありあすので。
次いで、common.cssで全ページ共通内容の記述内容を、
そして、home.cssでトップページ特有のスタイルを設定する、といった具合です。

ひとつのCSSファイルにすべて記述する方法も一般的ですが、行数が長くなり目的の記述箇所を探すのが大変だったりしますので、私は専ら複数CSSでのコーディングです。
WordPressは単一CSSですが。

｜margin｜
｜padding｜
｜border｜
｜ボックス内側｜
｜border｜
｜padding｜
｜margin｜

5.5のwidth—> padding｜border｜ボックス内側｜border｜padding
6.0のwidth—>｜ボックス内側｜

つまり5.5ではborderとpaddingを含んでしまうので、6.0でも同様のレイアウトを維持させる場合テクニックが必要となります。
結局は足し算引き算の問題になるのですが、これが結構悩ましいのです。7.0主流の現在でも一応5.5に対応したコーディングはしています。こんな具合に。

#sample
{
padding:0 5px 0 10px;
border:1px;
width: 500px;
voice-family: ""}"";
voice-family: inherit;
width: 483px;
}