Why is the margin of my child html element outside the parent

Question

I have a child element (h1 in my example) inside a parent div.

Why does the margin of the child appear to be outside of the parent.

The example below:

The child has a padding of 30px and a red border round it as expected. The div has a yellow background but I expected it to be of height 100 + 30 + the h1 + 30 + 100.

div {
    background-color: yellow;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

Interestingly if I put a border round the div as in the example below - it behaves as I expected. I know I can work round this, but I would like to know what is going on?

div {
    background-color: yellow;
    border: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

Its called "margin-collapse" Helpful: http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing — Bhojendra Rauniyar, Nov 18 '15 at 09:00

score 11 · Accepted Answer · answered Nov 18 '15 at 08:58

11

It's "margin collapsing" which can seem confusing at first.

I recommend you read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

answered Nov 18 '15 at 08:58

HaukurHaf

13,522
5
44
59

2

Ah ha. So I am right in thinking a margin means - I will guarantee you have this much space - but I may eat some of the space of things around me as long as nothing else (e.g. a border) is in the the way. – Jonny Nov 18 '15 at 09:04
Yeah, that's a pretty accurate description I think :-) – HaukurHaf Nov 18 '15 at 09:06

score 0 · Answer 2 · answered Nov 18 '15 at 08:58

0

This can be fixed by applying display: inline-block on the div or the h1. However, I highly recommend using padding on the div in this case, that should solve the problem permanently.

answered Nov 18 '15 at 08:58

ascx

473
2
13

However if you increase the padding, then the border around the h1 will continue to stretch out, which may be undesired. – mikeyq6 Nov 18 '15 at 09:01
@mikeyq6 Does it, though? I tried with the examples provided by the OP and was not able to reproduce that regardless of the amount of padding provided. – ascx Nov 18 '15 at 09:08
Sorry, I misread your answer, I thought you had said padding on the h1. My apologies, you are correct. – mikeyq6 Nov 18 '15 at 11:44

Vivek · Answer 3 · 2015-11-18T09:08:37.990

0

Empty blocks: If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse. Ref

You can use the outline css property for consistent behavior.

div {
    background-color: yellow;
    outline: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

edited Nov 18 '15 at 09:08

answered Nov 18 '15 at 09:03

Vivek

11,938
19
92
127

This does not work for the top/bottom margin - it's still outside the parent – msrd0 Jun 16 '21 at 16:56

score 0 · Answer 4 · answered Nov 18 '15 at 09:10

0

When you set the border that means you are telling the DIV container it's boundary.

you have to assign the widths and floats.

float: left;
width: 100%;

Right now the DIV is starting from top. But showing background from the mid.

answered Nov 18 '15 at 09:10

danish farhaj

1,316
10
20

Mark Vincent Nacional Manjac · Answer 5 · 2015-11-18T09:05:23.043

-2

div {
    background-color: yellow;
    padding:100px;
}

h1 {
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

Or this

div {
    background-color: yellow;
    padding:1px;
}

h1 {
    margin:100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

edited Nov 18 '15 at 09:05

answered Nov 18 '15 at 09:00

Mark Vincent Nacional Manjac

1
1

This does not answer the question. Instead of how to achieve the effect, the question is asking why the behaviour (margin of `h1` ends up outside of `div`) happens. – PSWai Nov 18 '15 at 09:05
you'd rather explain why your answer would solve his problem – Muhammed Refaat Nov 18 '15 at 09:16

Why is the margin of my child html element outside the parent

5 Answers5