【CSS】paddingとmarginの使い分けについて

現在プログラミングスクールに通い 

７０日間でWEBエンジニアになれるよう勉強中です！

本日はCSSの「padding」と 「margin」の違いについて

書きたいと思います！！

◆padddingとはとmarginの違いについて

paddingがborderの内側に余白を作るプロパティ

marginがborderの外側に余白を作るプロパティです。

これだけだと言葉足らずですね。

詳しく説明したいと思います！！

◆両者の使い分け

結論、borderの内側に余白を作りたいのか、外側に作りたいのかで

使い分けます。

ボックスモデルという概念について

知っておくと理解しやすくなると思います。

ボックスモデルとは、

paddingとborderとpaddingの関係性のことです。

padding(内側の余白)の外側にはborder(枠線)があり、

そしてborder(枠線)の外側にmargin(外側の余白)があります。

※borderはデフォルトでは表示されないです。

paddingやmarginを使う際は、

要素の周りに頭の中で枠線をつけてみると

上手に使い分けることができるかもしれません。