Child margin adding margin to parent

Question

how if i have the following code : HTML :

<section class="home">
</section>
<section class="main">
    <h1>Hello</h1>

</section>

CSS code :

html,body{
    height: 100%;
    width: 100%;
}
.home{
    background: #000;
    height: 100%;
}
.main{
    height: 100%;
    background: pink;
}

Why the white space or rather margin between the 2 sections ?? the problem seems to be the h1 tag . if i do :

h1{
    margin: 0;
}

Bham ! problem solved .

I have two issues with this .

1st the minor problem , now this style might be applied by the browser , i ca correct this with a reset no issues . but this is still a problem nevertheless .

My 2nd problem , AND THE big problem , now suppose the browser or even i explicitly specify that the margin-top of the h1 should be say 20-30px the margin should be from side the .main section WHY IS THE MARGIN APPLIED TO h1 WHICH IS INSIDE .main ACTING AS A MARGIN BETWEEN .main and .home ? What is the cause of this unique problem ??

I have read about margin-collapsing:

Mozilla

css tricks

But this seems to be more like CHILD-MARGIN-ADDING-MARGIN-TO-PARENT .

Jsfiddle of issue

Thanks .

Alexander.

possible duplicate of [Margin on child element moves parent element](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) — CBroe, Jan 22 '15 at 12:21
@CBroe is the 2nd link you provided relevant to my question ?? — Alexander Solonik, Jan 22 '15 at 12:29
It explains the collapsing margins/adjoining margins issue – that you did not seem to have understood so far (_“But this seems to be more like CHILD-MARGIN-ADDING-MARGIN-TO-PARENT.”_) — CBroe, Jan 22 '15 at 12:34
@CBroe is that link about 2 adjoining , adjacent components having their margins collapsed because of them being adjoining or adjacent ?? — Alexander Solonik, Jan 22 '15 at 12:37
_“Adjoining vertical margins collapse”_ – that’s what happens here, the margin-top of the section (0) and the margin-top of the h1 (>0, from browser default stylesheet) collapse, and the resulting margin-top is applied to the section. — CBroe, Jan 22 '15 at 13:02
@NaeemShaikh: Of course it does. The `h1` has a `margin-top` from the browser stylesheet (or override it explicitly with one you set yourself, if you like), and therefor the `section` does get pushed down by that margin, and the `h1` itself does not get pushed down itself from the top of the `section`. Add f.e. a `border-top:1px solid` to the section, and you will see the effect go away … _exactly_ as described in the part of the specification that I linked to. — CBroe, Jan 22 '15 at 17:53

score 1 · Accepted Answer · edited May 23 '17 at 12:28

http://jsfiddle.net/naeemshaikh27/qbaucv3j/1/

  .main{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

source https://stackoverflow.com/a/1939980/3556874

score 1 · Answer 2 · answered Jan 22 '15 at 20:13

Expected behavior in browsers is all too often unexpected .

What i really wanted to achieve by asking this question was not just get a solution to the problem but also actually know whats causing the problem .

which i eventually found in a thread not the same but similar and let me quote the part , that would solve the mystery :

The margins of the parent div and the h1 combine to form a single margin", even though they are nested, because they have adjoining margins with no padding or border between them.

and now coming to the solution well for me ,

overflow:hidden on the parent div worked just fine .

the same solution of course is high lighted by naeem in a earlier answer .

So heres the code : HTML :-

<section class="home"></section>
<section class="main">
        <h1>Hello</h1>

</section>

CSS:

html,body{
        height: 100%;
        width: 100%;
    }
    .home{
        background: #000;
        height: 100%;
    }
    .main{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

Here is the fiddle

Child margin adding margin to parent

2 Answers2

Linked

Related