はじめに
marginとpaddingはどっちも余白とるものだよね！
でも、いつもどっち使うべきか迷って、とりあえずmarginにしちゃってるよ！
何が違うの？
marginとpaddingは初心者が最も躓きやすいプロパティの一つだよ。
今回は、その違いについて解説していくよ！
marginとpaddingの違い
CSSのmarginとpaddingはどちらも要素の余白を指定するためのプロパティです。
どちらも要素の余白を指定しますが、余白を取る場所に以下のような違いがあります。
- margin：要素の外側に余白をとる。
- padding：要素の内側に余白をとる。
色々な例えがありますが、私は「marginは他人（他の要素）と距離を取る。」、「paddingは脂肪。太ると増える。（要素が骨や内臓を示す）」という説明が一番しっくり来ました（笑）
色々な例えがあるので、是非検索してみてください！
具体例
実際にソースコードを書いて確認してみましょう。
（サンプルコードを書いて、実際に動かすことで理解が深まります。）
今回は以下のような二つの四角形をサンプルとして扱います。
どちらの四角形も200pxの正方形で、borderを5px、marigin、paddingを0pxとしています。
今回は、四角形の内部が黄緑色のbox2のmarginやpaddingを変化させてその違いを見ていきます。
また、重要な前提条件として、この二つの正方形それぞれが独立した要素であることを意識してください！（下記ソースコード参照）
ソースコードは以下の通りです。
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>.wrapper {
display: flex;
}
.box1 {
margin: 0px;
padding: 0px;
border: 5px solid pink;
background-color: #ffffdd;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.box2 {
margin: 0px;
padding: 0px;
border: 5px solid pink;
background-color: #ccffcc;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}①marginの変更
まず、box2に対してmargin-left:50px;を追加してみましょう。
すると以下のようにbox1との間に50pxの余白ができます。
これがmarginの「要素の外側に余白を取る」ことを表しています。
②paddingの変更
次にbox2に対してpadding-left:50px;を追加してみましょう。
（①のmargin-left:50px;は削除します。）
すると、box2の文字の左側に50pxの余白ができます。
これがpaddingの「要素の内側に余白を取る」ことを表しています。
まとめ
いかがだったでしょう？「marginは他人（他の要素）と距離を取る。」、「paddingは脂肪。太ると増える。（要素が骨や内臓を示す）」という例えしっくり来ませんか？（笑）
基本的な使い分けのポイントとして「同階層関係の要素の余白はmarginを使う」、「上下階層関係の要素の余白にはpaddingを使う」というルールに基づいて使い分けることをおすすめします。
終わりに
本記事はここまでとなります。
ご覧いただきありがとうございました。ご指摘等がございましたら頂けますと嬉しいです。
引き続き、プログラミングについて定期的に発信していきますのでよろしくお願いします！
また、もしよろしければtwitterもフォローしていただけると嬉しいです！🐢
コメント