CSSは次の要素を気にせず書く
Componentは次の/内の要素を個別に関知せず、そのように余白の責任を受け持つ
A + Bがあった場合、間のmarginを持つのはB
なので例えばListを作る時は :first-child { margin-top: 0 }で辻褄を合わせる
A > Bがあった場合、Aは子要素全体に対するpaddingを持ち、Bにおけるユニークな余白はBが持つ
https://gyazo.com/b4a7588220672d2e60a3e76c01b87843
https://gyazo.com/3600cb87c45c6823f119b42b2622d66f
上から下、左から右、外から内へ要素が追加されていくHTMLの文脈で、要素は次の要素の位置について責任を持たない
右から左への順番になった時の余白の持ち方は逆になる
Component実装
Componentを実装する時
Componentは外側への余白を持たない
余白はComponentをレイアウトする時に設定する
Container Componentを実装する時
内側へのpaddingは持って良い。共通した外側への余白(margin)は持たない