margin collapsing

by Artem

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context -->

<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

CSS

.blue, .red-inner {
  height: 50px;
  margin: 10px 0;
	border: 1px solid #000;
}

.blue {
  background: blue;
}

.red-outer {
  overflow: hidden;
  background: red;
	
}