スタイルシートのマージンは隣接する場合は重なる？

HPのデザインを変更していて、どうも、レイアウトがうまく行かないと思ったら・・・

マージン（ margin ）の設定は、隣接する場合は重なるというか、片側だけしかとられない仕様なんですね・・・？

実験

例えば、＜div＞を使って100px四方の四角い領域を2つ用意して。それぞれのマージンを上左右全てに30pxずつ設定したとします。

これを2つ上下に並べたら、それぞれが30pxずつのマージンを持っているなら四角同士は60px離れなければ行けないわけですが、実際には・・・

30pxしか離れませんね。

これは、それぞれのオブジェクトが、相手側のマージン設定を考慮せず、相手の実体位置からの距離で位置を決めるということなのでしょうか・・・。

しかし、画像にマージンを設定してみると・・・

画像の場合は、重ならずにマージン設定の分だけ離れていますね・・・（￣-￣；）

もしかして・・・

今度は同じDIVで設定した領域ですが、今度はインラインブロックにしてみました。

すると、画像のときと同じ、マージンは重ならずにそれぞれに設定されましたね。

Uh-huh…