フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） - Qiita

前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 原則 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottom

[Rishatang]

:not(:first-child)をよく使う/ :not(:last-child)を使えば普通にbottomも使える。隣接セレクタよりnotのほうが意図を明確に表してると思うから、個人的にはnotのが好き

[efcl]

margin-topベースの余白設計 https://qiita.com/ln-north/items/dcf305d80edde550645e

[takaesu]

親要素のpaddingで周囲（上下左右）の余白を取る。 1の設定では不可能な、子要素間の余白をmargin-topで取る。

[hirorock]

margin-topのみに制限する必要がある

[manhole]

margin-topを使う。打ち消しはせず隣接セレクタを使う。

[Nyoho]

ほうほうあれトルツメっていうんだ

[michiomochi]

margin-bottomではなく出来るだけmargin-topを使う、や子要素のmarginではなく親要素のpaddingを出来るだけ使う等、なんとなくでやってたことを言語化されててよい。

[norip44]

存在忘れててごめん…今度からは使う（隣接セレクタ）

[hirose504]

なるほど、隣接セレクタ便利そうだけど、ブコメにあった :not(:first-child) とどっちにするか悩ましいな

[tech0403]

記事読む限り、記述が少なくなるからGoodと言ってるように見えるが、隣接要素はレンダリング遅い。もっと言うとmarginよりpaddingの方が遅い（背景色とかも引き継いでの余白だから当然）。bottom減らせて何が嬉しいんだろ？

[cl-gaku]

なるほど隣接

[phantom-kid]

隣接セレクタとscssのコンボはマジ最強

[trashtoy]

隣接セレクタ派

[bocuno]

なぜbottom統一じゃいかんのか説明してほしい

[kinushu]

同一の要素間の余白を取りたい場合は隣接セレクタ

[Phenomenon]

隣接セレクタ初めてしったわ

[canonono]

& + &

[Olein]

どうも、ファーストチャイルドしてました

[hiroelegance]

新規で設計する時こうしよう。

[umai_bow]

なるほどだ。BEMとかだと採用しにくいけど、哲学としては一番正しい気がする

[kobayashi_shinji]

:nth-child(n+2)って方法もあるよ

[shiromatakumi]

普通にファーストチャイルドしてたわ。取り入れよう。

[yarumato]

“原則 1. 基本的にmargin-topを使う。後々調節しやすいから。３. 特定の要素同士が並んだ時だけマージン（隣接セレクタ）。余白の打ち消し設定が不要に”

[wims_Tea]

:first-childとか書くのダルいからここ数年はずっとこの法則で書いてるわ。

[kkeisuke]

隣接セレクタと margin-top margin-left border-top border-left