Why does this CSS margin-top style not work?

Question

I tried to add margin values on a div inside another div. All works fine except the top value, it seems to be ignored. But why?

What I expected:

What I get:

Code:

#outer {
  width: 500px;
  height: 200px;
  background: #FFCCCC;
  margin: 50px auto 0 auto;
  display: block;
}

#inner {
  background: #FFCC33;
  margin: 50px 50px 50px 50px;
  padding: 10px;
  display: block;
}

<div id="outer">
  <div id="inner">
    Hello world!
  </div>
</div>

W3Schools has no explanation to why margin behaves this way.

hum.. With `float:left;` it works... but why is this needed. I do not want it to float. And why does margin for left/right work? — lejahmie, Mar 01 '12 at 16:22

score 544 · Accepted Answer · edited Feb 14 '20 at 14:02

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

no line boxes, no clearance, no padding and no border separate them

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

Float either of your div elements

Make either of your div elements inline blocks

Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

Apparently, [you're not the only one to think it's stupid](http://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins)... — BoltClock, Mar 11 '12 at 05:02
FYI, `Set overflow of #outer to auto (or any value other than visible)` does not work on iOS. So I changed it to `Make either of your div elements inline blocks` and it works well. — Yonggoo Noh, Feb 10 '22 at 14:17

score 131 · Answer 2 · edited Jul 15 '22 at 09:01

131

Try using display: inline-block; on the inner div. Like so:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

edited Jul 15 '22 at 09:01

Youssouf Oumar

29,373
11
46
65

answered Mar 01 '12 at 16:20

enderskill

7,354
3
24
23

2

Ok, that is freaky! Why does that work? What is the logical explanation to why it doesn't work as one would expect. Margin left / right works without `display:inline-block;`. Also set back for when using `display:inline-block;` is that you lose the width of 100% on the div. – lejahmie Mar 01 '12 at 16:25
6

switching it to inline-block forces the browser to reevaluate the size of the div after its placed and other rules are applied. – Rooster Mar 01 '12 at 16:26

score 33 · Answer 3 · edited Apr 24 '23 at 13:20

BoltClock's answer is pretty solid. Here I just want to add several more solutions for this problem. check this w3c_collapsing margin. The green parts are the potential thought how this problem can be solved.

Solution 1

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

that means I can add float:left to either #outer or #inner demo1.

also notice that float would invalidate the auto in margin.

Solution 2

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

other than visible, let's put overflow: hidden into #outer. And this way seems pretty simple and decent. I like it.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Solution 3

Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

or

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

these two methods will break the normal flow of div

Solution 4

Margins of inline-block boxes do not collapse (not even with their in-flow children).

is the same as Enderskill

Solution 5

The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

This has not much work to do with the question since it is the collapsing margin between siblings. it generally means if a top-box has margin-bottom: 30px and a sibling-box has margin-top: 10px. The total margin between them is 30px instead of 40px.

Solution 6

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

This is very interesting and I can just add one top border line

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;
    
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    
}

Also, <div> is block-level in default, so you don't have to declare it on purpose. Sorry for not being able to post more than 2 links and images due to my novice reputation. At least you know where the problem comes from next time you see something similar.

score 22 · Answer 4 · edited Jul 15 '22 at 09:02

22

Not sure why what you have doesn't work, but you can add overflow: auto; to the outer div.

edited Jul 15 '22 at 09:02

Youssouf Oumar

29,373
11
46
65

answered Mar 01 '12 at 16:23

Brandon

68,708
30
194
223

score 20 · Answer 5 · edited Feb 11 '21 at 19:49

20

Not exactly sure why, but changing the inner CSS to

display: inline-block;

seems to work.

edited Feb 11 '21 at 19:49

Gyan Prakash

43
7

answered Mar 01 '12 at 16:22

harriyott

10,505
10
64
103

score 16 · Answer 6 · edited Jul 15 '22 at 09:04

16

If you add any padding to #outer, it works. Demo here:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

edited Jul 15 '22 at 09:04

Youssouf Oumar

29,373
11
46
65

answered Mar 01 '12 at 16:28

bookcasey

39,223
13
77
94

score 5 · Answer 7 · answered Feb 22 '21 at 11:30

Create new block formatting context

You can use display: flow-root on the parent element to prevent margin collapsing through the containing element as it creates new Block Formatting Context.

Changing the value of the overflow property to auto or using flexbox will have the same effect.

https://codepen.io/rachelandrew/pen/VJXjEp

score 5 · Answer 8 · edited Jul 15 '22 at 09:10

Doesn't answer the "why" (has to be something w/ collapsing margin), but seems like the easiest/most logical way to do what you're trying to do would be to just add padding-top to the outer div:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    padding-top: 50px;
}
#inner {
    background:#FFCC33;
    margin:0px 50px 50px 50px;
    padding:10px;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

Minor note - it shouldn't be necessary to set a div to display:block; unless there's something else in your code telling it not to be block.

score 4 · Answer 9 · edited Jul 15 '22 at 09:11

4

Try this:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

Good luck!

edited Jul 15 '22 at 09:11

Youssouf Oumar

29,373
11
46
65

answered Mar 01 '12 at 19:44

Mustafa M Jalal

321
1
4
18

score 3 · Answer 10 · edited Apr 30 '12 at 03:46

Use padding-top:50pxfor outer div. Something like this:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Note: padding will increase the size of your div. In this case if the size of your div is important, I mean if it must have a specific height. decrease the height by 50px.:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

score 2 · Answer 11 · answered Mar 06 '12 at 18:34

I guess setting the position property of the #inner div to relative may also help achieve the effect. But anyways I tried the original code pasted in the Question on IE9 and latest Google Chrome and they already give the desirable effect without any modifications.

score 2 · Answer 12 · edited Mar 13 '12 at 09:01

2

Have you tried !important before all, it will force everything:

margin:50px 50px 50px 50px !important;

edited Mar 13 '12 at 09:01

BoltClock

700,868
160
1,392
1,356

answered Mar 12 '12 at 17:46

atgr24869

47
3

score 0 · Answer 13 · answered Jun 23 '22 at 16:29

0

If you have a margin collapse issue, then to resolve this you can add display: flow-root; to the parent container.

Aside from that, if margin-top is being ignored, try margin-top with a negative value, for instance: margin-top: -2px;

answered Jun 23 '22 at 16:29

Jackie Santana

1,290
14
15

This repeats the answer from a year prior that suggests the same solution: https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work/66314867#66314867 – TylerH Apr 24 '23 at 13:22

score -2 · Answer 14 · answered Aug 01 '19 at 06:07

Just for a quick fix, try wrapping your child elements into a div element like this -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Margin of inner div won't collapse due to the padding of 1px in-between outer and inner div. So logically you will have 1px extra space along with existing margin of inner div.

Why does this CSS margin-top style not work?

14 Answers14

8.3.1 Collapsing margins

Create new block formatting context

Linked

Related