兄弟要素と親子要素で発生するmarginの相殺について確認します。また相殺が発生しない例外についても確認します。
デモページはこちら

共通のCSSは以下になります。

.div-parent {
  margin: 0 0 1em;
  background: #fff;
  overflow: hidden;
}
.div-child {
  width: 200px;
  height: 100px;
}
.div-child:nth-child(1) {
  background: #ff9933;
}
.div-child:nth-child(2) {
  background: #3399ff;
}
.li-child {
  width: 200px;
  height: 100px;
  background: #ff9933;
}

まず、兄弟要素の上下マージンです。オレンジにmargin-bottom: 10px、青にmargin-top: 30pxを指定します。オレンジと青の間の余白は40pxにはなりません。marginが相殺されて大きい方のmarginが適用され、余白は30pxになります。

.style01 {
  margin-bottom: 10px;
}
.style02 {
  margin-top: 30px;
}

次に、親要素と最初の子要素の上マージンです。ulにmargin-top: 30px、liにmargin-top: 10pxを指定します。marginが相殺されてmargin-top: 30pxになります。

.style03 {
  margin-top: 30px;
}
.style04 {
  margin-top: 10px;
}

次に、親要素と最後の子要素の下マージンです。ulにmargin-bottom: 30px、liにmargin-bottom: 10pxを指定します。marginが相殺されてmargin-bottom: 30pxになります。

.style05 {
  margin-bottom: 30px;
}
.style06 {
  margin-bottom: 10px;
}

次に、親子要素の例外です。親要素のdisplayがblock、list-item、table以外の場合、marginは相殺されません。ulにmargin-top: 30px、display: flex、liにmargin-top: 10pxを指定します。marginが相殺されないのが確認できます。

.style07 {
  display: flex;
  margin-top: 30px;
}
.style08 {
  margin-top: 10px;
}

次も、親子要素の例外です。親要素にborderが設定されている場合、marginは相殺されません。ulにmargin-top: 30px、border: 1px solid #333、liにmargin-top: 10pxを指定します。marginが相殺されないのが確認できます。

.style09 {
  border: 1px solid #333;
  margin-top: 30px;
}
.style10 {
  margin-top: 10px;
}

次も、親子要素の例外です。親要素にpaddingが設定されている場合、marginは相殺されません。ulにmargin-top: 30px、padding-top: 10px、liにmargin-top: 10pxを指定します。marginが相殺されないのが確認できます。

.style11 {
  padding-top: 10px;
  margin-top: 30px;
}
.style12 {
  margin-top: 10px;
}

最後にmarginの相殺ではないですが、親要素がoverflow: visible（初期値）だと子要素の上マージンが親要素を突き抜ける現象です。div-parentにoverflow: visible、オレンジにmargin-top: 30pxを指定します。

.style13 {
  overflow: visible;
}
.style14 {
  margin-top: 30px;
}

この現象はdiv-parentにoverflow: hiddenを指定すれば解消できます。