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;
}

.blue {
  background: blue;
}

.red-outer {
  background: red;
}

.red-inner {
	margin-top: 10px;
}