まず、ボックスモデルについてまだ知識が浅い場合はこちら。
https://qiita.com/suiru_nakamura/items/f81eb7a4b0bc696cf01d

marginの種類

marginにはプロパティが用意されており、省略も簡単。

個別指定
・margin-top
・margin-bottom
・margin-left
・margin-right

marginの省略
・margin:0;(上下左右）
・margin:0 0;(上下）（左右）
・margin:0 0 0;（上）（左右）（下）
・margin:0 0 0 0;（上）（右）（下）（左）

論理プロパティ
・margin-start
・margin-end
・margin-before
・margin-after

margin-topなどは見慣れてるけど、margin-startは初めてという方もいると思う。margin-(start|end|before|after)は回転方式のブロックに対して、提案されたもの。
margin-topは、画面から見た物理的な方向に対し、margin-startは、物理的な方向になる。
横書きにmargin-startが指定されている場合は、margin-leftが適用される。
縦書きになった場合は、margin-startは、margin-topが適用されることになる。

このプロパティを使用することにより、同一のcssで縦書き、横書きの切替がスムーズになる可能性を持っている。

marginとautoとwidthの関係

marginに対して、autoを設定した場合は数値は0になる。しかし、横幅（width）を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を算出する。

ブラウザの幅が600pxの場合
div {
width:100px;
margin-left: auto;
}

上記の例なら、ブラウザの幅が600pxなので、margin-leftは自動で500pxになる。

marginの中央配置

横幅を指定した状態で、margin-left, margin-rightにautoを指定した場合。左右等分のmarginが算出され、ボックスは中央に配置される。

Negative Margin(ネガティブ・マージン）

marginの数値をマイナス指定することによって、要素を移動や、要素を配置する。パターンから外れたレイアウトを組む際に、お世話になることが多い。

ネガティブマージンを使用すると、レイアウトの幅が広がる。ただし、上記ソースの1つ1つの意味が、理解できていないうちは、多様すべきではない。

marginとpadding

marginでも、paddingでも、空間を開けることが可能。

margin,padding共に、空間を開けることができる。見た目は同じに見えるが、挙動は全く違う。

paddingは、背景色や、枠線にも影響して余白を開けることができるが、marginは要素ごとで間隔を開けることができる。

marginの相殺

paddingにはない機能として、marginの相殺がある。相殺はmargin同士が重なった場合に起こり、「marginが使いづらい」という印象を与える最大の理由かもしれない。
特定のケースだと、相殺が起きないなどすごい動きをする。
しかし、marginの相殺を理解することで、marginの単一方向の指定や、paddingを使用するよりも、HTML、CSSをクリーンに書ける場合も多くある。

aa

bb

aa

bb

paddingであれば、divの間は、10px+10px=20px となる。
marginは相殺によってdivの間が、10pxしかあかない。

相殺を理解するには、要素を人に例えると、以下のような感じになる。

・widthは、骨格
・heightは、身長
・borderは、皮膚
・paddingは、脂肪
・marginは心の距離
みたいなw

入れ子での相殺

相殺は入れ子の状態でも、marginが重なれば発生する。
両方ともにmarginが設定された場合、相殺が発生する。

child

入れ子の別の例

demo

上記の例では、margin-topは、.parentの方が大きいので30pxが適用される。しかしmargin-bottomは、.childの方が値が大きいので40pxが適用されることになる。相殺が起こった場合は、大きい方の値が優先される。

相殺が起こらないケース

親の要素に特定のCSSを適用することで、子の相殺が発生しない。
・border（marginが指定されている方向）
・padding（marginが指定されている方向）
・overflow:hidden, scroll（auto, visibleは適用されない）
・position:absolute, fixed（relative, staticは適用されない）

また、floatも調べたが、今回はここまでにしておこう。

ご清聴ありがとうございました。

引用先（参考先）：https://kojika17.com/2012/08/margin-of-css.html

引用させていただきました。この記事に勉強させていただきました。ありがとうございました。