I try 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:
<
Not sure why what you have doesn't work, but you can add
overflow: auto;
to the outer div.
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:
http://jsfiddle.net/hpU5d/1/
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.
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.
What @BoltClock mentioned are pretty solid. And 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;
}
And 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.
Try using display: inline-block;
on the inner div.
#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;
}
If you add any padding to #outer
, it works.
Demo
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:block;
padding-top:1px;
}