Peculiar behavior of margin css property

Question

The situation is:

The CSS:

<style>
#aux1{
    position:relative;      
    background-color:#ccc;
    width:100%;
    height:200px;
}
#aux2{
    display:block;
    background-color:#F00;
    width:100px;
    height:100px;
    margin:20px;
}

</style>

The HTML:

<html><head></head>
<body>
    "...some content (div with height: auto)"
    <div id="aux1">
        <div id="aux2">
        </div>
    </div>
</body>
</html>

The problem is that the margin property from aux2 acts strange as in the following image:

unusual margin photo 1

If I put overflow:hidden in aux1 the result tends to normal:

unusual margin photo 2

Why do I even need to use overflow:hidden for the margin (especially margin-top) to act normally?

it is... you are right. Although my question is on a specific case of collapsing, the parent-child div case — andreihondrari, Sep 09 '12 at 10:10
The duplicate question also talks about a parent-child div margin collapsing issue. — BoltClock, Sep 09 '12 at 13:57

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

The answer is, margin collapsing as in this question: Why does this CSS margin-top style not work?

Another question reference: What is the point of CSS collapsing margins?

edited May 23 '17 at 11:49

Community

1
1

answered Sep 09 '12 at 10:12

andreihondrari

5,743
5
30
59

Peculiar behavior of margin css property

1 Answers1