How to disable margin-collapsing

Question

Is there a way to disable margin-collapsing altogether   The only solutions I ve found  by the name of  uncollapsing   entail using a 1px border or 1px padding   I find this unacceptable  the extraneous pixel complicates calculations for no good reason   Is there a more reasonable way to disable this margin-collapsing

User · Answer

I had similar problem with margin collapse because of parent having position set to relative. Here are list of commands you can use to disable margin collapsing.

HERE IS PLAYGROUND TO TEST

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

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.container {_x000D_
  width: 100%;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.absolute {_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 50px;_x000D_
  right: 50px;_x000D_
  height: 100px;_x000D_
  border: 5px solid #F00;_x000D_
  background-color: rgba(255, 0, 0, 0.5);_x000D_
}_x000D_
_x000D_
.margin {_x000D_
  width: 100%;_x000D_
  height: 20px;_x000D_
  background-color: #444;_x000D_
  margin-top: 50px;_x000D_
  color: #FFF;_x000D_
}_x000D_
_x000D_
/* Here are some examples on how to disable margin _x000D_
   collapsing from within parent (.container) */_x000D_
.parent-fix1 { padding-top: 1px; }_x000D_
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}_x000D_
.parent-fix3 { overflow: auto;}_x000D_
.parent-fix4 { float: left;}_x000D_
.parent-fix5 { display: inline-block; }_x000D_
.parent-fix6 { position: absolute; }_x000D_
.parent-fix7 { display: flex; }_x000D_
.parent-fix8 { -webkit-margin-collapse: separate; }_x000D_
.parent-fix9:before {  content: ' '; display: table; }_x000D_
_x000D_
/* Here are some examples on how to disable margin _x000D_
   collapsing from within children (.margin) */_x000D_
.children-fix1 { float: left; }_x000D_
.children-fix2 { display: inline-block; }

_x000D_

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

_x000D_

Here is jsFiddle with example you can edit

User · Answer

Actually  there is one that works flawlessly   display  flex  flex-direction  column      as long as you can live with supporting only IE10 and up    x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column  x000D      background   ddd  x000D      width  15em  x000D    x000D   x000D   square   x000D      margin  15px  x000D      height  3em  x000D      background  yellow  x000D    x000D   lt div class  container  gt  x000D       lt div class  square  gt  lt  div gt  x000D       lt div class  square  gt  lt  div gt  x000D       lt div class  square  gt  lt  div gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D       lt div class  square  gt  lt  div gt  x000D       lt div class  square  gt  lt  div gt  x000D       lt div class  square  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For your information you could use grid but with side effects      parent     display  grid

User · Answer

I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements

User · Answer

One neat trick to disable margin collapsing that has no visual impact  as far as I know  is setting the padding of the parent to 0 05px    parentClass       padding  0 05px      The padding is no longer 0 so collapsing won t occur anymore but at the same time the padding is small enough that visually it will round down to 0    If some other padding is desired  then apply padding only to the  direction  in which margin collapsing is not desired  for example padding-top  0 05px    Working example   x000D   x000D   noCollapse   x000D    padding  0 05px  x000D    x000D   x000D   parent   x000D    background-color  red  x000D    width  150px  x000D    x000D   x000D   children   x000D    margin-top  50px  x000D   x000D    background-color  lime        x000D    width  100px  x000D    height  100px  x000D    x000D   lt h3 gt Border collapsing lt  h3 gt  x000D   lt div class  parent  gt  x000D     lt div class  children  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt No border collapsing lt  h3 gt  x000D   lt div class  parent noCollapse  gt  x000D     lt div class  children  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Edit  changed the value from 0 1 to 0 05  As Chris Morgan mentioned in a comment bellow  and from this small test  it seems that indeed Firefox takes the 0 1px padding into consideration  Though  0 05px seemes to do the trick

User · Answer

Every webkit based browser should support the properties -webkit-margin-collapse  There are also subproperties to only set it for the top or bottom margin  You can give it the values collapse  default   discard  sets margin to 0 if there is a neighboring margin   and separate  prevents margin collapse    I ve tested that this works on 2014 versions of Chrome and Safari  Unfortunately  I don t think this would be supported in IE because it s not based on webkit   Read Apple s Safari CSS Reference for a full explanation   If you check Mozilla s CSS webkit extensions page  they list these properties as proprietary and recommend not to use them  This is because they re likely not going to go into standard CSS anytime soon and only webkit based browsers will support them

User · Answer

overflow hidden prevents collapsing margins but it s not free of side effects - namely it    hides overflow   Apart form this and what you ve mentioned you just have to learn live with it and learn for this day when they are actually useful  comes every 3 to 5 years

User · Answer

There are two main types of margin collapse    Collapsing margins between adjacent elements Collapsing margins between parent and child elements   Using a padding or border will prevent collapse only in the latter case  Also  any value of overflow different from its default  visible  applied to the parent will prevent collapse  Thus  both overflow  auto and overflow  hidden will have the same effect  Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height   Other properties that  once applied to the parent  can help fix this behaviour are    float  left   right position  absolute display  inline-block   flex   You can test all of them here  http   jsfiddle net XB9wX 1    I should add that  as usual  Internet Explorer is the exception  More specifically  in IE 7 margins do not collapse when some kind of layout is specified for the parent element  such as width    Sources  Sitepoint s article Collapsing Margins

User · Answer

In newer browser  excluding IE11   a simple solution to prevent parent-child margin collapsing is to use display  flow-root  However  you would still need other techniques to prevent adjacent element collapsing   DEMO  before    x000D   x000D   parent   x000D    background-color  grey  x000D    x000D   x000D   child   x000D    height  16px  x000D    margin-top  16px  x000D    margin-bottom  16px  x000D    background-color  blue  x000D    x000D   lt div class  parent  gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    DEMO  after    x000D   x000D   parent   x000D    display  flow-root  x000D    background-color  grey  x000D    x000D   x000D   child   x000D    height  16px  x000D    margin-top  16px  x000D    margin-bottom  16px  x000D    background-color  blue  x000D    x000D   lt div class  parent  gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can also use the good old micro clearfix for this   container  before   container  after      content           display  table     See updated fiddle  http   jsfiddle net XB9wX 97

[css] How to disable margin-collapsing?

HERE IS PLAYGROUND TO TEST

Examples related to css

Examples related to margin

Examples related to collapse