まず、ボックスモデルについてまだ知識が浅い場合はこちら。
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をクリーンに書ける場合も多くある。
paddingであれば、divの間は、10px+10px=20px となる。
marginは相殺によってdivの間が、10pxしかあかない。
相殺を理解するには、要素を人に例えると、以下のような感じになる。
・widthは、骨格
・heightは、身長
・borderは、皮膚
・paddingは、脂肪
・marginは心の距離
みたいなw
入れ子での相殺
相殺は入れ子の状態でも、marginが重なれば発生する。
両方ともにmarginが設定された場合、相殺が発生する。
入れ子の別の例
上記の例では、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
引用させていただきました。この記事に勉強させていただきました。ありがとうございました。