Disable margin collapse

Here are few examples on how to prevent margin from collapsing

by buksy

HTML

<div class="container parent-fix">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

CSS

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

JavaScript

/*
http://stackoverflow.com/a/37562505/619616

TO PREVENT MARGIN FROM COLLAPSING:
Just try to assign any `parent-fix*` class to `div.container` element, or any class `children-fix*` to `div.margin`. Pick the one that fits your needs best.

When
- margin **collapsing** is **disabled**, `div.absolute` with red background will be positioned at the very top of the page.
- **margin is collapsing** `div.absolute` will be positioned at the same Y coordinate as `div.margin`

*/