CODEWITHSUNDEEP
htmlcss
Mulgard
Mulgard

Reputation: 10609

Gap on top of h1 title

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?

Upvotes: 2

Views: 111

Answers (4)

gitsitgo
gitsitgo

Reputation: 6789

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>

Upvotes: 1

web-tiki
web-tiki

Reputation: 103810

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>

Upvotes: 3

Toby Cannon
Toby Cannon

Reputation: 735

You have a margin on your h1 selector.

This was the line that causes it:

margin-top: 10px;

Check out this Demo

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56459

That's the margin on your h1.

Change your margin to be padding:

DEMO

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

Upvotes: 1

Related Questions