マージンの相殺

1. <style>
2. .cdvSample210 > *{ outline:1px solid; }
3. .cdvSample210 .cdvClassA{ margin:1em; }
4. .cdvSample210 .cdvClassB{ margin:2em; }
5. .cdvSample210 .cdvClassA + .cdvClassB{ margin-top:3em; }
6. </style>
7. <div class="cdvSample210">
8. <div class="cdvClassA">クラスＡ</div>
9. <div class="cdvClassB">クラスＢ</div>
10. <div class="cdvClassB">クラスＢ</div>
11. </div>

隣接するマージンの相殺をしたくない場合は、「隣接兄弟結合子」を用いて改めて加算した値を指定する方法があります。

1. <style>
2. .cdvSample220 .cdvClassA,
3. .cdvSample220 .cdvClassB > *{ outline:1px solid; }
4. .cdvSample220 .cdvClassB{ outline:1px dashed; }
5. .cdvSample220 .cdvClassA{ margin:1em; }
6. .cdvSample220 .cdvClassB{ margin:0 2em 2em 2em; padding-top:2em; }
7. </style>
8. <div class="cdvSample220">
9. <div class="cdvClassA">クラスＡ</div>
10. <div class="cdvClassB"><div>クラスＢ</div></div>
11. <div class="cdvClassB"><div>クラスＢ</div></div>
12. </div>

常に相殺をしないで個別に確保したいと感じる場合は、それは領域を意識しているという事でそれの包括要素を定義して内側の余白 (padding) を用いるのが意味からしても適切かと思います。

1. <style>
2. .cdvSample300{ border:1px dashed; }
3. .cdvSample300 > *{ outline:1px dashed; }
4. .cdvSample300 > * > *{ outline:1px solid; }
5. </style>
6. <div class="cdvSample300">
7. <div style="margin: 1em; padding-top:1px; ">
8. <div style="margin: 2em 1em;">子要素</div>親要素</div>
9. </div>

親要素と先頭の子要素のマージンの相殺をしたくない場合は、親要素の上側の境界(border-top)，内側の余白(padding-top) のいずれかを指定する方法があります。
この方法は領域を確保するので、背景とか幅，高さの計算に注意が必要です。
(border-top:1px solid transparent;)

1. <style>
2. .cdvSample320{ border:1px dashed; }
3. .cdvSample320 > *{ outline:1px dashed; }
4. .cdvSample320 > * > *{ outline:1px dashed; }
5. .cdvSample320 > * > * > *{ outline:1px solid; }
6. </style>
7. <div class="cdvSample320">
8. <div style=" margin:1em; ">
9. <div style=" padding-top:2em; ">
10. <div style=" margin: 0 1em 2em 1em;">孫要素</div></div>親要素</div>
11. </div>

常に相殺をしないで個別に確保したいと感じる場合は、それは領域を意識しているという事でそれの包括要素を定義して内側の余白 (padding) を用いるのが意味からしても適切かと思います。

内包要素の違いで上パティングを調整したいが為に内包要素のマージンで代用している場合も、この様に調整用要素を用いた方がましかと思います。

1. <style>
2. .cdvSample330{ border:1px solid; }
3. .cdvSample330 > *{ outline:1px dashed; width:10em; }
4. .cdvSample330 > * > *{ outline:1px solid; width:6em; height:2em; }
5. .cdvSample330 .cdvMarginA{ margin:1em; }
6. .cdvSample330 .cdvMarginB{ margin:2em; }
7. .cdvSample330 .cdvMarginA > .cdvMarginB:first-child{ margin-top:0; }
8. </style>
9. <div class="cdvSample330">
10. <div class="cdvClassA">
11. <div class="cdvClassB">子要素</div>
12. 親要素
13. <div class="cdvClassB">子要素</div>
14. 親要素</div>
15. </div>

先頭の子要素のマージンはなくても良いという考えなら、兄弟要素のグループの中で最初の要素を表す :first-child 疑似クラスを用いて改めて 0 を指定する方法があるかと。
７行目の .cdvClassB を * (全称セレクタ) に代えれば、cdvClassB に限らず cdvClassA の先頭の子要素であれば全てという指定に出来ます。

また、先頭の子要素と親要素の輪郭の距離は別に良いが、隣接の距離は加算したい場合は、margin-top:0; を望む値に代えればよいです。計算と条件の限定が面倒ですが。