Why don't a child's vertical margins expand their parent container?

user_516629 0
Viewed 7269

I have come across a case where I need a child's margin to expand a parent container. I found that the space outside of the parent is allocated, but the parent itself is not expanded. I then found that by adding overflow: hidden to the parent I could fix this issue.

Can anyone shed any light on why this is the case?

I have found that adding any padding or border value to the parent also fixes this.

section {
    background: black;
    //overflow: hidden; /* toggle this */
    //padding: 1px; /* or toggle this */
    //border: solid 1px green; /* or toggle this */
}

div {
   margin: 10px;
   background: red;    
}
<section>
    <div>
        SOME CONTENT            
    </div>
</section>

JSFiddle Example

margin css html
3 Answers

A small update as of July 2018. Mozilla has a great article on this matter which is due to margin collapse.

Summary: Margins of the parent and the first child may collapse. They end up as if the parent had the resulting margin.

Parent and first/last child

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

user_64112570
Related