エンジニア初心者の投稿であるため、間違っている箇所が多くあるかと思います。
何かお気づきの点がありましたらご教授いただけると幸いです。

はじめに

HTML/CSSを使って見た目を組み立てるときに必ず使うmarginとpaddingがある。
どちらも意味的には余白を作るプロパティになっているがそれぞれの使い方が曖昧になっていたり、よくわかっていないところがあったので、調べてみることにした。

marginとpaddingとは

marginとpaddingについては以下のサイトが非常に詳しく、わかりやすく説明してるので、わからなくなった時はそこから確認する。

marginを使ったレイアウト作りをするときのコツ

marginはtopとleftのみを使うようにすると保守性が高まる。
marginでは上下左右どちらにどのくらい余白を空けるかを設定することができるが、むやみに全ての方向に値を設定して余白を作ってしまうと保守性が悪くなる。そこで余白を空ける部分を限定にする。具体的にはmarginの設定を上と左に固定することである。

CSS

//悪い例 (全ての方向に余白を設定してしまっている)
.wrong__margin {
margin: 10px 20px 10px 20px;
}

//良い例 (topとleftのみに余白を設定している)
.good__margin {
margin: 10px 0 10px 0;
}

または

.good__margin {
margin-top: 10px;
margin-left: 10px;
}

marginとpaddingの使い分け

marginは兄弟要素間、paddingは親子間の余白を設ける。

親子要素と兄弟要素については以下の記事がわかりやすく説明をしている。

実際にソースコードで書いてみるとこのようになる。

HTML

 <div class="parent__box">
    <div class="children__box">子要素</div>
    <div class="children__box">子要素</div>
 </div>

CSS

//親要素にはpaddingをつける
.parent__box {
  color: white;
  background: black;
  width: 300px;
  height: 300px;
  padding: 100px; 
}

//子要素にはmarginをつける
.children__box {
  background: white;
  width: 250px;
  height: 100px;
  margin: 0 0 100px 0;
}

上のソースコードの結果がこれ↓

なかなかに細かい設定の仕方だが、実際にこの方法でレイアウトを作ると頭なの中で位置を組みやすかった。

終わりに

これまでHTML/CSSでレイアウトを組み立てる時はGoogleの検証ツールを用いて、ゴリ押しスタイルで余白をつけていたため、レイアウトがおかしくなった時にどこを直せば良いのかがわからなくなり、混乱することがあった。
上記で述べたルールを守ることによって、より効率よくCSSを活用したい。

参考文献

https://blog.codecamp.jp/margin_padding
https://it-hack.net/development/markup-language/html/element-relation

【HTML/CSS】marginとpaddingについて