Gap on top of h1 title

Question

I want to style a toolbar similar to the android toolbar. First I defined a header :

html,
body {
  height: 100%;
  margin: 0;
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', 'sans-serif';
}
header {
  background: #FF0000;
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
}
h1 {
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-bot: 10px;
  font-size: 30px;
}

<header>
  <h1>Home</h1>
</header>

What I dont understand now is the small gap at the top of the title:

Gap on top of H1 title

I set the padding and the margin to be zero. so why do I get this gap at the top of my header?

Has nothing to do with your question, but note that `margin-bot` does not exist. It's called `margin-bottom`. — Siguza, May 01 '15 at 13:46

score 3 · Accepted Answer · edited May 23 '17 at 12:14

The gap on the top of your title is created because of the top margin of the <h1> tag.

This is called collapsing margins. You can see here for ways to disable it : How to disable margin-collapsing?.

And for example set overflow:hidden; on the parent <header> element :

html,
body {
  height: 100%;
  margin: 0;
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', 'sans-serif';
}
header {
  background: #FF0000;
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h1 {
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
}

<header>
  <h1>Home</h1>
</header>

score 1 · Answer 2 · answered May 01 '15 at 13:44

1

That's the margin on your h1.

Change your margin to be padding:

DEMO

h1 {
    padding: 10px 0;
    margin: 0;
}

answered May 01 '15 at 13:44

Mathew Thompson

55,877
15
127
148

score 1 · Answer 3 · answered May 01 '15 at 13:45

1

You have a margin on your h1 selector.

This was the line that causes it:

margin-top: 10px;

Check out this Demo

answered May 01 '15 at 13:45

Toby Cannon

725
6
16

gitsitgo · Answer 4 · 2015-05-01T13:48:31.947

It has a gap because the h1 within your header has margin-top: 10px. Set it to 0px and it the gap will not appear anymore.

Also as a side note, margin-bot is not a valid css property. It's margin-bottom.

html,
body {
    height: 100%;
    margin: 0;
    background-color: #E5E5E5;
    font-family: 'RobotoDraft', 'sans-serif';
}

header {
    background: #FF0000;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
}


h1 {
    color: black;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 30px;
}

<header>
    <h1>Home</h1>
</header>

Gap on top of h1 title

4 Answers4