CODEWITHSUNDEEP
htmlcssmargin
SilentDev
SilentDev

Reputation: 22747

CSS - why does margin-top change the parent divs margin top?

This is my html:

<div id="Header">
    <div id="logoContainer">
        <p id="welcome">Welcome</p>
        <h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
    </div>
</div>

and this is my CSS:

#Header {
    font-family: consola;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
}

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
}

#welcome {
    font-weight: 500;
    font-size: 8px;
    margin-bottom: -6px;
}

#logoImage {
    width: 14px;
    vertical-align: -4px;
    padding-left: 5px;
    padding-right: 5px;
}

.logoText {
    font-size: 12px;
    font-weight: 500;
}


#second {
    font-weight: 500;
}

Now, when I change 

#logoContainer

to 

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
    margin-top: 100px; // add a margin-top of 100px
}

the 

#Header

and the 

#logoContainer

get a margin-top of 100px

. How do I just give 

#logoContainer

a margin-top of 100px?

Upvotes: 4

Views: 4213

Answers (2)

Erik Reppen
Erik Reppen

Reputation: 4635

Total re-edit. So here's the deal with vertical margins.

Rule #1 - when two vertical margins in static or relative display elements meet (e.g. a bottom and top margin between two block elements in normal flow), the smaller of the two disappears.

Rule #2 - If a wrapping parent container doesn't have any padding or border, the same collapse thing thing happens to its top margin and its first child's top margin (and similar with last child and bottom margin). The smaller one disappears and the larger one takes its place. So a P tag with a 10px margin inside a DIV with no padding, or borders will actually push that parent DIV tag down as if the parent div had its own 10px top margin. If the parent div had had its own 15px margin but no padding or border, it would have been as if the P tag's margin had disappeared. 1px padding or border on the parent, however will stop this behavior because the two margins are no longer coming into contact with one another.

IMO, Rule #1 is great. You can basically have a bunch of content elements and always be certain that the larger whitespace need will be observed without any doubling up.

Also IMO, Rule #2 stinks. It doesn't come up quite as often as you'd think but it's really a bit of a nuisance when it does and still the reason I will sometimes only use margins on top or bottom in certain types of layout scenarios.

Upvotes: 8

j08691
j08691

Reputation: 207890

What you're experiencing is called margin collapsing.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

There are few ways to counteract this behavior, and in your case adding a 1px border around the parent element (e.g. border:1px solid #0f0;) will do.

jsFiddle example

Upvotes: 3

Related Questions