padding と margin 使って余白の調整でデザインを整えるのに知っておきたい関係性

paddingとmargin

余白の調整に使用。

padding と margin の関係性

余白の設定に、padding marginを使用する。
paddingは要素から見て付けたい余白の指定に使用。
margin は、隣接する要素との余白（空間）に指定に使用。

各要素を四角の入れ物として考えてる。

文字

↓　padding(文字と枠線までの余白）

枠線（boder)

↓　margin(隣合わせの要素との余白）

隣の要素

指定する時の値
px　em %

margin padding 指定方法
1 ～ 4 つの値を使って指定することができます。

padding やmargin指定してる要素に
サイズ指定　height width を設定した場合。

box-sizing　で指定しない場合は、要素のサイズになる。
したがって、要素サイズ+paddingサイズ+borderサイズになる。

box-sizing: border-box;
を入れると、指定したサイズの中で納まるようになる。

.p {
box-sizing: content-box;
}

最後に、この記事見てるあなたは、独学中ですか？
私も最初は、独学でやろうとしました、プログラミング
を独学はちょっとしんどい。。。
私のだした結論は、お金出して学ぼうでした。
独学で時間かけるよりも、お金出して、早くマスター
して、早く収益を上げれるようにした方がいいと思いました。