marginの相殺について

兄弟要素の上下マージン（オレンジにmargin-bottom: 10px、青にmargin-top: 30px）

親要素と最初の子要素の上マージン（ulにmargin-top: 30px、liにmargin-top: 10px）

親要素と最後の子要素の下マージン（ulにmargin-bottom: 30px、liにmargin-bottom: 10px）

【親子要素の例外】親要素のdisplayがblock、list-item、table以外の場合
（ulにmargin-top: 30px、display: flex、liにmargin-top: 10px）

【親子要素の例外】親要素にborderが設定されている場合
（ulにmargin-top: 30px、border: 1px solid #333、liにmargin-top: 10px）

【親子要素の例外】親要素にpaddingが設定されている場合
（ulにmargin-top: 30px、padding-top: 10px、liにmargin-top: 10px）

親要素がoverflow: visible（初期値）だと子要素の上マージンが親要素を突き抜ける（div-parentにoverflow: visible、オレンジにmargin-top: 30px）

親要素がoverflow: hiddenだと子要素の上マージンが親要素を突き抜けない（div-parentにoverflow: hidden、オレンジにmargin-top: 30px）