You have several options that create a visual barrier between the elements, which stops margin collapsing

Add overflow: hidden to their parent

.container {
  overflow: hidden;
}

Add a small padding or border to their parent

.container {
  padding-top: 1px; (or padding-bottom)
}