垂直方向のマージンにはmargin-topを優先的に使う理由

margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar

[kojika17]

top, top & bottom, bottom 全部使うけど、優先的は僕も topやな

[fukken]

実際やりたいことを深く考えると、見出し等の「前」にマージンをつける、であることが多いので、topを優先するのは理解できる

[ttskch]

本題とズレるけどStackレイアウトってパターン知らなかった便利そう

[michiomochi]

これを意識するかしないかでCSSのメンテしやすさが格段に違う。

[masakuma0812]

［要素］[余白]［指定］［優先］［コード］

[otchy210]

`.stack > * + *` これ知らなかった。なるほど便利。垂直 flex より使い勝手の良いシーンもありそう。

[oakbow]

なんとなくbottomのほうが直感的な気がして使ってたけど、確かにtopの方が理にかなってる気がしてきた

[Cherenkov]

重力に囚われてるからbottomが好きだな

[daigo0117]

余白は、直前の要素との関係性によって決定するので、自分もtop派。見出しだけはbottomも付けるけど。

[kuracom]

確かに最後の要素が何になるか分からないケースがあるから納得。いつもケースバイケースでやってたけど次回は意識したい。

[yamadadadada2]

後ろにいる人が前との距離を決めるって考えるとわかりやすいかも。車間距離的な

[blueboy]

　margin-top　で主要量を調整してから、おまけで　margin-bottom　を 5px　ぐらい足している。 枠を付ける感じ。　（ピッタリと隙間なしだと、気分が悪い。）　／　左右も合わせて、四つの数字を並べることも多い。

[GiveMeChocolate]

topだなあ

[tk0707]

上だわ。 あとから要素ぶっこむ時に下に入れてると面倒臭くない？

[ducktoon]

先人が margin-top だけ使えと言ってたので基本そうしてるけど、CSSフレームワークのほうでbottomを乱用してたりするとわけがわからなくなる

[Fivestar]

Stack Layoutで+使うのは古いブラウザへの対応の名残なのかなと。

[spark7]

基本上優先かつ相殺前提なら上下両方か。下優先てのは無いな

[gla69]

あ〜なるほど…！

[sigwyg]

なるほどなあ。ブロックは左上の隅に合わせたいという欲求があって、末尾は雑でいいや、やろうと思えばできるし、くらいの感覚でbottom派だった。

[proverb]

なるほどなぁ

[akahigeg]

昔聞いて可能な限りmargin-topだけ使うようにしてるけど「このマージンどっから来てんだ？」が減っていいかんじ。

[momo_t]

margin-topを優先的に使っている。

[kijtra]

この stack layout って :not(:first-of-type) の方が良くない？

[programmablekinoko]

float全盛時代に画面幅によってプカプカ浮いてくるdivに業を煮やしたので頭から押さえつける派となりmargin-topをずっと使ってた

[hase0510]

なんで「間」にマージンを設定できないんですかね。できるようにすればいいのに。

[hamaco]

特にそんな理由もなく最近はなんとなーく自分で書くときはmargin-top使ってたけど改めて読んでなるほど。

[dorarep]

こういうCSSのナレッジ助かる！フロントエンドっていうと今はほぼJSの情報メインだからなー

[yarumato]

“margin-bottomではなくmargin-topを使う派　重要度の高い情報を上から順に並べるとき末尾の要素は相対的に重要度低く、非在も多い。Stackレイアウトとの取り合わせやすさ。隣接セレクターを使った場合分けができる”

[mayumayu_nimolove]

コンポーネント思考になってからmarginはあまり使わなくなったなぁ。

[o_ti]

どっちも使うけど、優先するのはどっちかと言われると margin-top だなぁ

[kvx]

頭の切り替えが必要だ。見出し下などの調整はbottomになるのか、見出しの隣接セレクタになるのか。/隣接する先頭の要素が非表示になると困るやつだ。