.parent {
    margin: 10px;
    background-color: #8bf;
  }
      

  .child {
    margin: 10px;
    background-color: #fe8;
  }
      

  .sibling {
    margin: 10px;
    background-color: #8f8;
    border: 3px solid #484;
  }
      

Block-axis (here, vertical) margins will collapse. Inline-axis margins do not.

A border or padding on the parent comes between the parent and child margins and prevents collapse. Block formatting context (here, due to overflow: hidden) also disables margin collapse.

Borders and padding on thge child do not lie between child and parent margins, so do not prevent collapse.

Margins between adjacent block siblings collapse. Borders do not come between and thus have no effect.

Inline margins do not collapse between inline siblings. Inline elements do not have block-axis margins.