親子間の距離調整はpadding、兄弟間はmargin？

Question

いつも、距離調整でmarginとpaddingどちらを使おうか迷います。

そんな時に下記のツイートを見つけました。

「親子間の距離の調節はpadding,兄弟間はmarginで指定すると可読性の高いコードになる」

https://twitter.com/nose_free/status/1164704813327609857?s=21

たしかに今まで模写してきたサイトもそういう作りが多かった気がします。

上のツイートを参考にして、今後コーディングしていこうかなと考えているのですが、ベテランの皆様はどう思われますか？
また、使い分けで心がけていることがあれば教えていただけるとありがたいです。

Comments

[ikadzuchi]

すいません、「親子間」「兄弟間」というのがどこの事を指しているのか分からないので具体的に図かHTML+CSSの例で示していただけますか?

[Silky]

Lhankor_MhyさんがHTML+CSSの例を挙げてくださったので、下記の例を引用させていただきます。

<section>
<h1></h1>
<article></article>
</section>

親子間：sectionとh1、sectionとarticle
兄弟間：h1とarticle

[ikadzuchi]

了解です。回答は既に十分出ているので私からは特にありません。

Answer 1

基本的にその方針でコーディングして問題ありません。
が、そうする理由は「可読性」の問題ではありません。

「親子間の距離の調節」を行う際に子のmarginを使ってしまうと、
親要素にpaddingもborderもなかった場合、子のmarginが親要素の
外側についてしまって「親子間の距離の調節」にならない仕様があります。
親要素にpaddingまたはborderがついていれば意図したとおりに
「親子間の距離」とすることはできますが、状況によって意図したとおりに
なったりならなかったりするような使い方は間違いの元となるため、
親要素と子要素の間に距離を取りたい場合は親要素にpaddingをつけるのが原則です。

また兄弟間の距離の調節にmarginを使うのは、
そもそもmarginの用途が**「隣接する他の要素との間の余白」を作るもの**なので
それを第一優先に使うのは当然です。

paddingで代用することが可能なケースもありますが、
制作時点ではpaddingが不要だったとしても、後々paddingを追加する必要が出てきた場合に、兄弟間の距離を取るのにpaddingを既に消費してしまっていた場合には
結局marginに付け替える必要が出てきます。
またpadding同士やpaddingとmarginは隣接した場合に相殺される仕組みが
ありませんので、意図的にmargin相殺をするといったテクニックも使えないので
製作時の選択肢がひとつ減ります。

結局、どちらを使っても良さそうに見えたとしても、
基本的には「隣接する要素間の余白はmargin、要素自身の内側の余白はpadding」
という基本仕様に沿った使い方を原則とするのが最も素直な使い方なんですよね。
もちろん「原則」なので何か意図があって「例外」的な使い方をすることは否定しませんが、
あくまで仕様と原則を理解した上での例外であるべきなので、乱用は避けるべきかと思います。

Comments

[Silky]

＞親要素にpaddingもborderもなかった場合、子のmarginが親要素の 外側についてしまって「親子間の距離の調節」にならない仕様

試してみるとまさにその通りでした！
可読性の問題ではなく、そのような裏の事情があることは知りませんでした。

勉強になりました。ご回答ありがとうございます！

Answer 2

他の回答者さんのご回答にもありますが、
marginとpaddingは、可読性うんぬんで使い分けるのではなく、
あくまで役割・仕様の違いでしかありません。
ブロックの外側に適用されるのが、margin、ブロックの内側に適用されるのがpaddingです。
そのツイッターに出てくるエンジニアが何を意図して可読性が上がるを基準にしているのかは全く謎ですが、（CSSの可読性はまったく変わらないし、HTMLの書き方にしても、paddingにしようがmarginにしようが、それで書き方が変わるようなことはない。それで可読性の良し悪しが出るならはっきり言ってテクニックが足りない）
その考え方だと、簡単な実装においては、結果的には大丈夫だったとしても、
それを鵜呑みにしていると、込み入ったスタイルの実装の時に、行き詰まるかと思います。
（paddingきかせてるのに、全然きかない！←margin（外側）でないと隙間がきかない箇所、など）

実装したいレイアウトを見た時、自ずと、marginにすべきか、paddingにすべきかは見えてくるかと思いますので、仕様に則った正しい方を選択すべきでしょう。
ただし、aKusanoさんがおっしゃる通り、例外的に、marginではうまくレイアウトが効かないパターンは実際にあるので、実務の上では、本来marginにすべきだが、致し方なくpaddingに置き換えるということはよくあります。

Comments

[Silky]

＞実装したいレイアウトを見た時、自ずと、marginにすべきか、paddingにすべきかは見えてくるかと思いますので、仕様に則った正しい方を選択すべきでしょう。

確かにその通りですね。型にはまった考え方だと柔軟性がなくなってしまうので、その場その場で適切だと判断したほうを使用していきたいと思います。
ありがとうございました。

Answer 3

<section>
  <h1></h1>
  <article></article>
</section>

section{
}
h1{
  margin: 20px 20px 10px;
}
article{
  margin: 10px 20px 20px;
}

と書くより、

section{
  padding: 20px;
}
h1{
  margin: 0 0 10px;
}
article{
  margin: 10px 0 0;
}

と書いた方がいい、ということですよね。

それは正しいと思いますが、原則論として覚えてしまうのはどうかと思います。
そのツイートも「コードレビューで指摘を受けた」と書いてあるだけで、原則論として書いているわけではないと思いますよ。

Comments

[Silky]

HTML+CSSの実例で示していただき、ありがとうございます。
確かに原則論としては覚えずに、こういう考え方のもとに今回はmarginを使う、paddingを使う、というようにしていきたいと思います！
ありがとうございました。

Answer 4

可読性を上げる時、利便性・デザイン性を損なってしまっては意味がありません。
兄弟間や親子間でpaddingやmarginを使い分けるよりもいろいろ試してデザイン性・利便性に理にかなった物にしたほうが良いです。

その上でyoshinaviさんがおっしゃるようにパーツの名前をわかりやすくしたり無駄をなくしたりした方が良いです。

少なくとも自分はそんなポリシーを持ってます。

自分のホームページデザインが適当な奴が言えることではないですけどご参考までに

Comments

[Silky]

確かに、可読性をあげるため、利便性・デザイン性を犠牲にするのは意味がないですよね。。。
paddingやmarginを兄弟間、親子だからと言うように型にはまった考え方で判断するのではなく、おっしゃられるとおりデザイン性・利便性を考慮して決定していきたいと思います
ありがとうございました。

Answer 5

個人的な感想なので偏っているかもですが･･･

CSSはデザインを担当します。
marginには背景色は設定できませんが、paddingには設定できる事が、デザインには大きな違いになります。
「兄弟だからmargin」「親子だからpadding」に拘ったところで可読性は変わりがないです。

状況は千差万別であり、「aKusano」さんの回答にもあるようにmarginだと支障をきたす場合があるので注意は必要ですが、可読性をあげるのであれば、クラス名、プロパティ・プロパティ値の記述統一、部品の共通化、等の方に気を使った方が良いかと思います。

Comments

[Silky]

＞marginには背景色は設定できませんが、paddingには設定できる事が、デザインには大きな違いになります。

確かにその通りですね。これはpaddingとmarginの大きな違いですね！

＞可読性をあげるのであれば、クラス名、プロパティ・プロパティ値の記述統一、部品の共通化、等の方に気を使った方が良いかと思います。

確かに可読性という点ではそれらのほうが大切ですね。自分も今後命名や、プロパティとその値の記述の統一、部品の共通化などより意識していきたいと思います。

ありがとうございました。