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 · Accepted 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

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

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

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

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

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   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   lt div class  container parent-fix1  gt  x000D     lt div class  margin children-fix  gt margin lt  div gt  x000D     lt div class  absolute  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is jsFiddle with example you can edit

User · Answer

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

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

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

[css] How to disable margin-collapsing?

Examples related to css

Examples related to margin

Examples related to collapse