【CSS】marginとpaddingの違いについて図でまとめてみた

そんな時はmarginとpaddingプロパティを使い分けるのがいいんじゃ。

両方とも余白を決める時に使うんじゃ。以下の画像を見てみてほしい。赤枠の部分が余白じゃ。

全ての要素は表示領域(helloworldとか)、境界線、内側の余白(padding)、外側の余白(margin)が存在するんじゃ。
それらの事をまとめてボックスモデルと呼んでおる。

そう。paddingは内側から広げていくというイメージじゃな。marginは単純に余白を作るものと思っていいぞ。

基本的に指定方法は同じなんじゃ。上下左右の余白を設定できるぞい。

そうじゃな。marginは　 0 Auto と指定することで-ボックスを中央寄せにすることができる。div要素などのblock要素に作用し、インライン要素には効かないから注意じゃな。

何かを押すボタンを作りたい時、内部に余白を取りたいケースがあると思う。そんな時はpaddingを使おう。

うむ、他にもあるボックスの文章内の余白を付けたり、ボックス同士の余白を空けたり様々な使い方があるんじゃ。

marginには余白同士の相殺が起きるんじゃ。以下例を見てみよう。

そうじゃの。本来ならば合算して30pxの余白が出来るはずなんじゃが、marginの場合は合算できずに大きい数字によって相殺されてしまうんじゃ。

うむ。後述するが、基本的にはpaddingを用いて余白の調整をした方が無難じゃの。

box-sizing:border-boxはリセットCSSの一部としても使われておる。ようはボックスのpaddingやborderをwidthに含めるか含めないか。の違いじゃ。スマートフォン向け対応をする時に設定するとレイアウトが乱れたりするのを防ぐことができるんじゃ。

そうなんじゃ。marginは含まれない。なので極力marginは使わないで余白を設定した方がいいんじゃ。

先ほどいったように、単純に間隔を空けたい時に使えばいいんじゃ。こんな感じ。

あとはmarginの相殺が起きないように同方向での余白に使用するのがベストじゃな。