CODEWITHSUNDEEP
htmlcss
Matthew
Matthew

Reputation: 11260

css: margin-top causes scrollbar

The h1 element causes a scrollbar to appear. Can anyone explain me why?

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}
<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>

Upvotes: 26

Views: 13263

Answers (5)

Abhishek
Abhishek

Reputation: 315

h1 tag in a block level element has some margin.

To remove such type of extra margin and padding, it is recommended to reset all elements margin and padding to 0.

This can be done by :

 * {
     margin: 0;
     padding: 0;
 }


* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
header {
  height:10%;
}
section {
<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>

Upvotes: 1

Sampad
Sampad

Reputation: 1793

*
{
  margin:0px auto;
}
html, body {
  margin: 0 ;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}
<header>
  <h1>
    Hello
  </h1>
</header>
<section>

  test
</section>

Just add universal selector and make the margin *{margin:0px auto;} . Hope it will work

Upvotes: 1

Oriol
Oriol

Reputation: 288080

That's because

  • h1 have some vertical margin by default, usually 0.67em.
  • The top margin of h1 collapses
  • height never includes the height of the margin area

Since the top margin of h1 collapses, it behaves like the margin belonged to the header instead of the h1. Since the content height of the h1 is 10%, its total height will be calc(10% + 0.67em).

That's why there is overflow.

If you remove the top margin but leave the bottom one there is no problem, because the bottom one does not collapse, due to the non-auto height. From Collapsing margins,

Two margins are adjoining if [...] both belong to vertically-adjacent box edges, [... e.g.]

  • top margin of a box and top margin of its first in-flow child
  • bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height.

So you can do any of the following

  • Remove h1's top margin
  • Prevent the margin collapse
  • Propose a box-sizing: margin-box to the CSS Working Group. It will probably be rejected.

Upvotes: 20

Michael Benjamin
Michael Benjamin

Reputation: 371153

Because the h1 comes with a margin, applied by the default style sheet.

When you add this margin (often margin-top: .67em and margin-bottom: .67em) to the height: 100% in your code, this exceeds the viewport height, launching a vertical scroll bar.

Give the h1 a margin: 0.

Whether you use box-sizing: content-box or border-box, the margin space will always be added to your height declaration.

If you want to add space around your h1 without adding height, use padding instead of margin, along with box-sizing: border-box. Here are some implementation options: https://css-tricks.com/box-sizing/

Upvotes: 7

Polyov
Polyov

Reputation: 2311

h1 by default has a margin applied.

enter image description here

Upvotes: 1

Related Questions