515

I have a div (parent) that contains another div (child). Parent is the first element in body with no particular CSS style. When I set

.child
{
    margin-top: 10px;
}

The end result is that top of my child is still aligned with parent. Instead of child being shifted for 10px downwards, my parent moves 10px down.

My DOCTYPE is set to XHTML Transitional.

What am I missing here?

edit 1
My parent needs to have strictly defined dimensions because it has a background that has to be displayed under it from top to bottom (pixel perfect). So setting vertical margins on it is a no go.

edit 2
This behaviour is the same on FF, IE as well as CR.

9
  • 248
    this behavior makes no sense what so ever. Margin is suppose to stay inside the parent. Not move the parent. Who writes these rules. Mar 14, 2013 at 14:45
  • 20
    +2 for last comment. seriously this rule bugs me. "60% of the time it works every time" - that's margins. Mar 11, 2014 at 11:42
  • 44
    I totally agree with the two last commenters. This is insane. What's interesting is that adding a 1px border to the parent makes it work right, however this means you have a border...if this is the expected behavior then this is ridiculous
    – erdomester
    Sep 26, 2014 at 18:26
  • 1
    This may also help you :) stackoverflow.com/questions/35337043/… Feb 12, 2016 at 9:14
  • 9
    This reminds me of the default box-sizing rule: "We need to ship a box. The box must not be larger than 100cm. We need 10cm of padding inside the box to ensure our content doesn't break during the shipping. Let's make the box 120cm!" What a joke.
    – Nolonar
    Dec 15, 2016 at 12:54

18 Answers 18

599

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.


Update by popular request: The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }
<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Because the browser collapses margins, the text would appear as you'd expect, and the <div> wrapper tags don't influence the margins. Each element ensures it has spacing around it, but spacing won't be doubled. The margins of the <h2> and <p> won't add up, but slide into each other (they collapse). The same happens for the <p> and <ul> element.

Sadly, with modern designs this idea can bite you when you explicitly want a container. This is called a new block formatting context in CSS speak. The overflow or margin trick will give you that.

13
  • 54
    i wanna know why does this happen what good this does to anyone. What situation this 'feature' was meant to be. Mar 14, 2013 at 14:47
  • 4
    @MuhammadUmer, well this has to do with text content. For example, a series of <h2>, <p>, <ul> won't get strange gaps or "double" margins this way.
    – vdboor
    Mar 17, 2013 at 10:27
  • 7
    Could you give some example. Let say i have div as background. With h1, h2 and p in it. Now i want to move h1 down a bit so it's not so near to the above edge of background div, yet not expand the h1 element itself. I'd think add top margin. Which is obvious. but when i do that, the glorious background decides to move down with it. How this is a feature. How this helps in spacing between h1,h2, and p. Help me see what you are saying. Mar 17, 2013 at 19:24
  • 3
    i would expect it to add in more margin. collapsing margins is by far the most annoying thing in my development career. if i put 2 divs next to each other with margin: 5px 10px; id expect 2 divs 5 px from the top and 20px between them not 5 px from the top and 10px between them. if i wanted 10 px between them id have specified margin: 5px 5px;. i honestly wish there was a root rule i could place that would stop all margin collapsing. i hate that i have to double the size of the margins on paper to get them to actually do what the heck i want on screen. and this top thing... what a disaster
    – JL Griffin
    Oct 28, 2015 at 20:07
  • 3
    This just took up half my day, Here is what I think is a good explanation smashingmagazine.com/2019/07/margins-in-css/…. display: flow-root looks like another option.
    – peterc
    Apr 23, 2021 at 23:42
65

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

To get the behaviour you want, you need:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
7
  • 4
    Adding border to the parent will effect the child's margin too, try .parent {border: solid 1px;}
    – o.k.w
    Nov 19, 2009 at 11:17
  • 2
    The margin doesn't add to the padding... it applies separately. But the visual effect is the same.
    – Brilliand
    May 26, 2011 at 22:27
  • 2
    What if you want a top-margin…? Not really a solution.
    – feeela
    Jun 16, 2011 at 18:44
  • 4
    Like feeela said - this isn't really a solution if a top margin is required. vdboor's answer suits better. Apr 7, 2012 at 23:07
  • 1
    There are bunch of solutions, you just need to be creative enough. Cheers. :-) Mar 9, 2014 at 14:58
30

Although all of the answers fix the issue but they come with trade-offs/adjustments/compromises like

  • floats, You have to float elements
  • border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1px margin to the parent element itself. This can create problems when parent already has margin-top in relative units.
  • padding-top, same effect as using border-top
  • overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu
  • overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)

The issue can be resolved by using CSS3 pseudo elements as follows

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

5
  • 1
    margin-top: -1px seems to be unnecessary. But I like this.
    – Flimm
    Dec 23, 2015 at 10:34
  • 4
    Actually, both margin-top: -1px and height: 0 seems unnecessary. Tested in Chrome. But best solution.
    – NinjaFart
    Nov 11, 2016 at 15:11
  • This method mostly works, but will not respect the bottom margin for the last element within the container. It is not an equal fix to overflow: hidden; for example. Nov 13, 2017 at 11:40
  • 1
    @MichaelGiovanniPumo the answer can be modified to work with bottom margin of last element by using .parent:after...
    – Ejaz
    Nov 13, 2017 at 15:48
  • This is most definitely the correct answer nowadays. Works flawlessly (put it on both after and before), I hope people dare to scroll past the other ones! Oct 18, 2018 at 13:53
25

add style display:inline-block to child element

15

the parent element has not to be empty at least put &nbsp; before the child element.

1
  • 4
    yes, sometimes only this can help... or better put something like this: <div style='width:0;height:0'>&nbsp;</div> Oct 6, 2013 at 13:51
9

This is what worked for me

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

5

To prevent "Div parent" use margin of "div child":
In parent use these css:

  • Float
  • Padding
  • Border
  • Overflow
3

Neat CSS-only solution

Use the following code to prepend a contentless first-child to the unintentionally moving div:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

The advantage of this method is that you do not need to change the CSS of any existing element, and therefore has minimal impact on design. Next to this, the element that is added is a pseudo-element, which is not in the DOM-tree.

Support for pseudo-elements is wide-spread: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and IE 8+. This will work in any modern browser (be careful with the newer ::before, which is not supported in IE8).

Context

If the first child of an element has a margin-top, the parent will adjust its position as a way of collapsing redundant margins. Why? It's just like that.

Given the following problem:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

You can fix it by adding a child with content, such as a simple space. But we all hate to add spaces for what is a design-only issue. Therefore, use the white-space property to fake content.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Where position: relative; ensures correct positioning of the fix. And white-space: pre; makes you not having to add any content - like a white space - to the fix. And height: 0px;width: 0px;overflow: hidden; makes sure you'll never see the fix.

You might need to add line-height: 0px; or max-height: 0px; to ensure the height is actually zero in ancient IE browsers (I'm unsure). And optionally you could add <!--dummy--> to it in old IE browsers, if it does not work.

In short, you can do all this with only CSS (which removes the need to add an actual child to the HTML DOM-tree):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>
1
  • Only use this solution if you are desperate, and you can't set any custom CSS to the existing elements - otherwise use the real solution: set overflow: hidden; for the parent.
    – Yeti
    Sep 11, 2018 at 23:25
3

Play with display of parent

.parent{
     display: inline-block;
     width: 100%;
}

or

.parent{ display: flex; }
2

I find out that, inside of your .css >if you set the display property of a div element to inline-block it fixes the problem. and margin will work as is expected.

2

It's about Margin Collapsing.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.

There are several solutions, depending on the individual case. One solution is to change the display mode for the child.

.child {
  display: inline-block;
}

Also good to know. Margin collapsing is not applied on flex or gird container.

.parent {
  display: flex;
  flex-direction: column;
}

Or working with padding of parent instead of margin of childs. Changing overflow or float property could also help. Or position absolute. It depends on your layout.

1
  • So it's like negative margin collapsing? Feb 24 at 0:48
1

The margin of the elements contained within .child are collapsing.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

In this example, p is receiving a margin from the browser default styles. Browser default font-size is typically 16px. By having a margin-top of more than 16px on #child you start to notice it's position move.

1

I had this problem too but preferred to prevent negative margins hacks, so I put a

<div class="supercontainer"></div>

around it all which has paddings instead of margins. Of course this means more divitis but it's probably the cleanest way to do get this done properly.

1

interestingly my favorite solution to this problem isn't yet mentioned here: using floats.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

see it here: http://codepen.io/anon/pen/Iphol

note that in case you need dynamic height on the parent, it also has to float, so simply replace height:100px; by float:left;

1

Using top instead of margin-top is another possible solution, if appropriate.

1

An alternative solution I found before I knew the correct answer was to add a transparent border to the parent element.

Your box will use extra pixels though...

.parent {
    border:1px solid transparent;
}
1

You can solve this by adding a :before pseudo element with display: flex; to the parent.

.parent:before {
  content: '';
  display: flex;
}

Another way is to set the display property of the parent to flow-root.

.parent {
  display: flow-root;
}
0

The border solution is good but not the best because it increase the element total width even when being transparent

but what about negative border width ? not working :(

but still we can achieve it with box-sizing property which forcing the border to the negative direction

.parent{
   border:5px solid transparent;
   box-sizing: border-box;
 }
.child{
   margin-top:5px; 
 }

Notice if you want 10px top margin you have to add only 5px margin because 5px border top still affecting and this reason to prevent collapsing issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.