こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。
要素の外側はmarginで内側はpaddingという説明もされたりしますが、そうは言っても実際のコードを書くと迷ってしまいませんか？
そんなmarginとpddingの使い分けを解説していきます。
そもそも余白がいつ生まれるのか、根本的な考えについてはこちらをご覧ください。
基本的な方針｜外側はmargin、内側はpadding
例えばブログサイトなどで見られる記事のカードのようなパーツがあったとします。カードはサムネイル、日付、タイトルで構成されています。
基本的には、外側はmargin、内側はpaddingを使うのが良いです。
もしこのカードが横に並んだりするときは右側の要素にmargin-leftが付くことになります。
厳密な使い分け｜余白がそのパーツの一部とみなせるならpadding、そうでないならmargin
「パーツの一部とみなせる」とはどういうことでしょうか。
言葉で言うなら「余白も含めてパーツが成立している」ということになります。つまりその余白がなければそのパーツでなくなってしまうのです。
上記のカードを例に取ると、要素の外側の余白はあってもなくても同じカードとして見ることができます。しかし内側の余白はあるとないとでは違うカードとして見なすことになるでしょう。実際に見比べてみます。
余白があるものとないものを、同じパーツと言うのはちょっと難しいですよね。見た目が違っていますから。よってこの場合はpaddingを使うべきです。
また別の視点で言えば、パーツの並べ方や置かれる場所によって変わるような余白はパーツの一部としては考えられないのでmarginで指定した方が良いということになります。
例えばパーツが横並べの時と縦並べの時では、要素間の余白もそれに応じて方向が変わるはずです。
このような余白はパーツの一部ではなさそうですね。
パーツの一部かどうかを考え、一部であるならばpadding、そうでなければmarginを使いましょう。
使い分けは、使い回す要素の時にだけ考えれば最低限良い
さて、皆さんこうお思いではないでしょうか。
「はいはい分かりました分かりました。パーツの一部ならpaddingでそうじゃなかったらmarginね。じゃあ、
「ここどうすんの？」
はい、ここはどうするべきでしょうか。
極論言ってしまえば「どっちでも良い」です。
というのも、この「カード」というパーツにおいて日付の部分やタイトルの部分を単体で使い回すことは基本想定されない＝パーツじゃないからです。
ここまで何の気なしに「パーツ」という言葉を使っていましたが、ここで言うパーツとは「複数箇所で使いまわされる前提の要素の単位」のことを指していました。
上記の例では「カード」という単位で2つ並んだりしていましたが、「サムネイル」「日付」「タイトル」をそれぞれカードから抜き出して単体の要素として他の場所で使うことは基本的にありません。
もちろんこれまでの方針に従えば、それぞれを1つのパーツとして考えて各種余白をmarginで作るのがベターです。
とはいえHTMLの構造によってはpaddingの方が都合が良いケースもあって、必ずしも一般化しにくいのが正直なところです。
ですから、パーツとして使い回す前提でないものについてはその時に都合の良い方法を使えば良いです。
そもそも余白はいつ生まれるのか
ここまでmargin/paddingの使い分けについて考えてきました。余白をもっと深く知るために、そもそも余白という概念はいつ発生しているのかを考えてみましょう。
別記事で詳しく解説しているのであわせてご覧ください。
まとめ
というわけでmarginとpaddingの使い分けでした。余白の付け方で迷うことがある人はぜひこの考え方を真似してみてください。
ちなみに、「そもそも要素の外の情報をその要素が持っているのはおかしい」と言う話がありmarginはなるべく分離した方が良いと考えています。その話はまた別の記事で書こうと思います。
コメント