とある案件で各要素の上下の隙間をmarginで調整することがありました。

モジュール設計なのでh要素には上下○○px、P要素には上下○pxなど指定しつつ、お互いの距離は相殺を利用して大きい数字が採用される想定。

でも、モジュールを構成しているものにfloatなんかを使用していると、
その親要素でoverflow:hidden;で廻り込み回避しておりました。

が、そうなるとそのoverflow:hidden;をした要素の次に来る要素とはmarginの相殺はされずに加算されてしまうようです。

overflow:auto;にすれば大丈夫とあるが、ダメっぽく。。
しょうがないので、上下のマージンを調整するdivにはoverflowをかけずに、overflow用のdivを一枚かませることで回避。
→と思ったけど結局回避できない。
overflowより内側の要素に関しては、相殺から除外されてしまうもよう。

ちなみに、margin相殺の考え方でおもしろいなーとおもったのが、「お互いの心の距離」として考えると分かりやすいと。
Aさんは1m離れたい。Bさんは1.5m離れたい。このときに2.5mは必要ないと。1.5m離れれば事足りるよね、っていう考え方。

参考にしたサイトのURLが分からなくなってしまったので考え方だけお借りしました。