CSS Margin-top also effects parent

Question

I want to run a button in my menu, but every time that I set the margin-top propperty to 10, the parent also goes 10 pixels down...

here's my code:

nav {
    width: 100%;
    height: 125px;
    background-color: #fff;
    border: 0.1px solid #fff;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right:5%;
    margin-left:95%
}

And my HTML, really simple":

    <nav>
    <div id='menuknop'></div>
</nav>

Does anyone know how to solve this problem?

i got the same problem so i just gave nav{ padding-top:10px;} instead of margin in menu — himanshu, Sep 20 '14 at 13:21

score 2 · Answer 1 · answered Sep 20 '14 at 13:25

use padding in nav instead of margin in #menuknop

nav {
    width: 100%;
    height: 125px;
    background-color: #fff;
    border: 0.1px solid #fff;
    padding-top:10px;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-right:5%;
    margin-left:95%
}

but i dont know the correct reason of this behavior if someone know please let me know

The reason is about `margin collapse`. http://stackoverflow.com/questions/102640/css-margin-collapsing — Todd Mark, Sep 20 '14 at 13:32

Salman A · Accepted Answer · 2014-09-20T14:40:44.507

This is caused by margin collapsing. There are at least three ways to prevent margin collapsing:

Adding overflow: hidden
Adding border
Adding padding

Setting any of these will prevent the margin of an element to collapse with that of its first child.

Solution 1: you already have a 0.1px border, if you could change it to 1px the problem will disappear (seems like 0.1px borders are ignored anyway):

nav {
    width: 100%;
    height: 125px;
    background-color: #FFF;
    border: 1px solid #FFF;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}
#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: orange;
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 95%
}

<nav>
    <div id='menuknop'></div>
</nav>

Solution 2: add a (pseudo) element with hidden overflow:

nav {
    width: 100%;
    height: 125px;
    background-color: #FFF;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}
nav:before {
    content: "";
    display: block;
    overflow: hidden;
}
#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: orange;
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 95%
}

<nav>
    <div id='menuknop'></div>
</nav>

score 1 · Answer 3 · answered Sep 20 '14 at 13:54

It's margin collapsing - documented and intended CSS behavior for laying out flows of text, for which it was originally designed.

To prevent this behavior when it is not needed, there are several options:

Add some top padding or top border to a parent element. It doesn't have to be visible, it just should be non-zero. border-top: transparent solid .01px should be sufficient in most cases.
Make the parent element establish new block formatting context. Usually it is done by setting overflow:hidden to it, but this has some limitations.
Add an empty (pseudo) element that establishes block formatting context before the child element. So does the popular micro clearfix hack.
Take the child element from the blocks flow, e.g. by making it floating or by changing its display to inline-block (as suggested in comments to the question).

Choose what fits your requirements:)

score 0 · Answer 4 · answered Sep 20 '14 at 13:26

Use translate

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    transform: translate3d(10px,0,0);
    margin-right:5%;
    margin-left:95%
}

CSS Margin-top also effects parent

4 Answers4