5

I'm trying to understand a few things.

First question:

Why there is a margin-top on the body?

html {
  height: 100%;
  background-color: red;
}
body {
  height: 100%;
  margin: 0;
  background-color: yellow;
}
<h1>Hello Plunker!</h1>

If I look with dev tool inspector in Chrome, it shows me that the h1 top margin starts outside the body top margin (picture shows the h1 highlighted):

enter image description here

Second question:

In the next example, why does the yellow color is drawn outside the body?

I expected to see yellow color only within the body element, given that I set overflow property:

body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}

Third question

If I add a background-color on the html element, it works, the yellow color fills only the body element, why?

html {
  background-color: red;
}
body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}
Community
  • 1
  • 1
Don Box
  • 3,166
  • 3
  • 26
  • 55
  • I always use `position: relative` on the `body` so it's less confusing. – zer00ne Apr 21 '16 at 10:24
  • 6
    The first question is a duplicate of http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work The second and third questions are duplicates of http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body – BoltClock Apr 21 '16 at 12:00
  • That said, you should post your answer to your first question as an actual answer, rather than editing it into the question. – BoltClock Apr 21 '16 at 12:09
  • @BoltClock thanks for posting that SO question, it is indeed my 1st question. I had a brain freeze about margin collapsing, I completely forgot about it. Therefore, I didn't know what to search for first. Thanks again. – Don Box Apr 21 '16 at 12:24
  • @dippas dude, why did you delete your answer !? Disappointing... You provided good fixes, it's just that I was also looking to understand the **why** part too not just how to fix it – Don Box Apr 21 '16 at 12:24
  • 1
    @MikeFills because as boltclock pointed out my answers aren't fully correct.. Therefore it's better not to misguide you and future readers – dippas Apr 21 '16 at 12:27

2 Answers2

1

Your First Question

Why there is a margin-top on the body?

Answer Is It is because of h1 tag, h1 takes margin from top and bottom. Your point is appriciatable that html (red color) is showing. Its the default behavior. it will work fine when you add float to h1

h1{float: left;}

Your Second Question

I expected to see yellow color only within the body element, given that I set overflow property

Answer Is

overflow only works when you apply fix width/height to any tag/class.

if you apply overflow hidden to html/body it doesn't works, i think its the default behavior of the browser like firefox as well as others may be. Because same thing happened to me as well.

Third Questions answer also summarized in Answer of Second Question

i hope it would be helpful. Thanks

Muhammad Bilawal
  • 354
  • 3
  • 11
-2

Set margin: 0 to h1 and add padding instead, will solve your issue.

Wim Mertens
  • 1,780
  • 3
  • 20
  • 31