CSS margin does not work. Why?

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#a
{
    background:#33F;
    width:1000px;
    height:1000px;
}

#b
{
    width:500px;
    height:500px;
    background:#F00;
}

#c
{
    margin-top:50px;
    height:200px;
    width:200px;
    background:#FF0;
}
</style>
</head>

<body>

<div id="a">
    <div id="b">
        <div id="c">
        </div>
    </div>
</div>
</body>
</html>

Why div#c get margin-ed from the top of the browser instead of getting distanced from the div#b.

score 3 · Accepted Answer · answered Jan 14 '13 at 20:05

3

CSS has a concept called margin collapse.

Two margins are adjoining if and only if:

...

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

answered Jan 14 '13 at 20:05

zzzzBov

174,988
54
320
367

score 0 · Answer 2 · answered Jan 14 '13 at 20:10

0

you can add position: relative; to the #b element and position: absolute; to the #c element

answered Jan 14 '13 at 20:10

score 0 · Answer 3 · answered Jan 14 '13 at 20:12

You are percieving this incorrectly. It is doing exactly what you want it to -when the divs have contents.

I've inserted non breaking spaces to achieve what you were looking for.

http://jsbin.com/ifofix/2/

Below is the other fellows suggestion

http://jsbin.com/ifofix/3/

CSS margin does not work. Why?

3 Answers3