Body element has no margin but children's margin affects body's margin

Question

body has margin: 0
p tags has margin-top: 100px;

p tags affects body's margin-top why?

I expected margin-top:100px only affects p tags.

///////////////////////////////////////////////////////

I wonder why should I use padding-top instead of margin-top?

Margins create extra space around an element. In contrast, padding creates extra space within an element.

In this case p tags are located in body so margin and padding should be looks same

https://stackblitz.com/edit/react-lktg4q?file=style.css

html, body {
  margin: 0;
  height: 100%;
}

h1, p {
  font-family: Lato;
  margin: 0;
  margin-top:100px;
}

#root {
  background: blue;
  height: 100vh;
}

      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>

As you can see, You have applied margin-top for both `h1` and `p` — Sai Manoj, Jun 24 '19 at 05:53
Replace `margin-top` with `padding-top` if all you want is the top part to remain blue — Manav, Jun 24 '19 at 05:54
As per my understanding you need blue color throught body. For that you need to apply `padding-top` — Sai Manoj, Jun 24 '19 at 05:55
This is an effect the H1 margin-top you can replace margin-top to padding-top — Md. Abu Sayed, Jun 24 '19 at 06:07

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

That's the effect of margin collapsing. According to that MDN page:

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.

There are many ways to go about trying to work around it. But understanding this concept is one step to doing it.

In your case, the margin of the first element in your body (which is h1) affects the margin of the body. If you wish to not have a margin on the first h1, you could add this (see it on this jsfiddle):

h1:first-child {
  margin-top: 0;
}

This assume your first element in the body is an h1.

Some additional reading: https://bitsofco.de/collapsible-margins/ — Frank Fajardo, Jun 24 '19 at 06:41

score 0 · Answer 2 · answered Jun 24 '19 at 05:56

Apply padding-top instead of margin-top

html,
body {
  margin: 0;
  height: 100%;
}

h1,
p {
  font-family: Lato;
  margin: 0;
  padding-top: 100px;
}

#root {
  background: blue;
  height: 100vh;
}

<div id="root">
  <div>
    <h1>Hello React!</h1>
    <p>Start editing to see some magic happen :)</p>
  </div>
</div>

score 0 · Answer 3 · answered Jun 24 '19 at 06:00

0

I Have updated your code.

StackBlitz

answered Jun 24 '19 at 06:00

Sumit Patel

4,530
1
10
28

What if the OP want's `margin-top:100px` for `h1` also? – ravibagul91 Jun 24 '19 at 06:02
I wonder why should I use padding-top instead of margin-top? – JillAndMe Jun 24 '19 at 06:02
You should add more to this answer instead of a single URL. If the StackBlitz example got deleted, this answer would become invalid. – Rallen Jun 24 '19 at 06:05

ravibagul91 · Answer 4 · 2019-06-24T06:17:53.423

Looking at this,

#root {
  background: blue;
  height: 100vh;
}

I can say that you want background color to your body, as #root is the parent element and no element can be made parent to this, you can add #root css to your html, body css,

html, body {
  margin: 0;
  height: 100vh;
  background: blue;
}

h1, p {
  font-family: Lato;
  margin: 0;
  margin-top:100px;
}

Now coming to the scroll on the page, the scroll is coming because of margin-top:100px. You can fix this in two ways.

1st Way,

If margin-top:100px is the fixed layout throughout your application then,

html, body {
  margin: 0;
  height: calc(100vh-100px); //minus your margin from viewport height will eliminate scroll
  background: blue;
}

2nd way,

Replace margin-top with padding-top, because padding is included in element height and margin not.

h1, p {
  font-family: Lato;
  margin: 0;
  padding-top:100px;
}

Body element has no margin but children's margin affects body's margin

4 Answers4