【CSSの基本】そのmarginはどの要素が持っているのか

複数人数でコーディング作業していると、「あれ？CSSのmarginの当て方が自分のやり方と違ってて…ちょっと気持ち悪い」って思うことがありませんか？
marginの付け方に強制的なルールはないのですが、何となく一方向に向かってmarginを当てている人が多いと思います。
具体的には要素の下に付けていくタイプ（margin-bottom派）と上に付けていくタイプ（margin-top派）です。

margin-bottom派？margin-top派？それとも？

「マージンをどっち向きに付けるか問題」は結構古くからネット上の話題に上っています。
結局、強制的なルールがない以上、結論は出ないのですが、だいたい大きく分けて
margin-bottom派
margin-top派
ミックス派
の3つの派閥に分かれているみたいです。

～シンプルに考えて～margin-bottom派の意見

HTML＋CSSでコーディングをはじめてすぐはmargin-bottom派が多いのではないかと思います。
要素の間を開けるのに最も直感的に記述できるからでしょう。
私もコーディングを始めたころはmargin-bottomで要素間のスペースを開けていました。

～スマートなCSSを目指して～margin-top派の意見

margin-bottomで作業を進めると最後の要素の下にもmarginが開いてしまう時があります。（<ul>や<ol>の<li>タグなど）
解消するためには 疑似要素:last-child で最後の要素を別途修正するのですが、それがなんだか煩わしいとか。
また、上の要素と下の要素があったとして、下の要素が現れるまでは上の要素にmarginは必要ないのだから、下の要素がmarginを伴って表示されるべきというロジックがあります。

～そうは言っても…～ミックス派の意見

margin-top も margin-bottom もあるんだから、都合に合わせて融通したらいいじゃない？
とはいえ、それだと冒頭の複数人数で作業する場合、marginのポリシーが決まっていないと対応がバラバラになってしまい、CSSの汎用性が損なわれる可能性もあります。
なんらかのルールが欲しいところです。

親分子分派の旗揚げ

勝手に変な名前の派閥を立ち上げた感じですが、私はこんな考えでmarginルールを決めています。
基本的にはmargin-top派の「次の要素が余白を伴って表示される」という考えをベースにしています。
ただサイトの更新などでHTMLに変更があった場合、CSSもそれに伴い修正を余儀なくされるのですが、なるべく手間を減らしたいので、
要素に優先順位をつけて最も重要な要素を「親分」とし、付随する要素を「子分」として余白を持って追加されるようにします。

例えばこんなHTMLがあったとします。
.postクラスの中に記事タイトル、概要文、詳細リンクがあります。

<div class="post">
  <h3><a href="#">記事タイトル</a></h3>
  <p>概要文テキスト概要文テキスト概要文テキスト</p>
  <a href="#" class="button">詳細リンク</a>
</div>

単純なmargin-top派だと、marginの方向は以下のようになると思います。

<div class="post">
  <h3><a href="#">記事タイトル</a></h3>
  ↑↑↑
  <p>概要文テキスト概要文テキスト概要文テキスト</p>
  ↑↑↑
  <a href="#" class="button">詳細リンク</a>
</div>

概要文の<p>タグが記事タイトルである<h3>タグとの間にmarginを持ち、さらにその下に詳細リンクの<a>タグが<p>タグとの間にmarginを持つ形です。

ある時、記事タイトルの上にタイムスタンプを追加して、その代わり概要文を削除する修正が入ったとします。

<div class="post">
  <time>2021.11.11</time>
  <h3><a href="#">記事タイトル</a></h3>
  <a href="#" class="button">詳細リンク</a>
</div>

これまでのmargin-top方式だとこうなりますが、<time>タグを追加し、<h3>タグにmargin-topを与えないといけないです。

<div class="post">
  <time>2021.11.11</time>
  ↑↑↑
  <h3><a href="#">記事タイトル</a></h3>
  ↑↑↑
  <a href="#" class="button">詳細リンク</a>
</div>

これでも問題ないのですが、<h3>タグは.postクラスの中では必ず表示される最も重要な要素（親分）だと思われるので、ここを何度も修正したくありません。
そこで、、<h3>タグを中心にそのほかの要素がmarginを持つようにしてみます。

<div class="post">
  <time>2021.11.11</time>
  ↓↓↓
  <h3><a href="#">記事タイトル</a></h3>
  ↑↑↑
  <a href="#" class="button">詳細リンク</a>
</div>

なーんだ、<time>タグにmargin-bottomをつけて、<h3>タグには何もつけないようにしただけじゃないか！
確かにそうなんですが、.postクラスの中心である<h3>タグは、今後の更新でもほぼなくならない要素です。
<h3>タグを中心にすることで、CSSの修正は他の要素に絞られます。
追加・削除する要素のみ修正することができるようになります。
（もっとも、デザインがより複雑化すると、こんなに単純ではないですが。）

ともあれ、タグの持つ意味や文章構造を重要視するならば、HTML5的にもよい考えなのかなと思っています。