How do I get rid of this ghost padding on my h1? HTML & CSS

Question

So I am new to HTML & CSS and I have been having an issue with this sort of invisible padding on the top and bottom of both of my H1's (referring to the text "Hello." and "I'm Tim,"). I opened up my website in Google Chrome and that is where I noticed this sort of ghost padding. I'm not sure what it is exactly, but I want to get rid of the spacing between my two H1's. How do I go about it?

body {
    font-size: 62.5%;
    margin: 0px auto;
}

.header-wrap {
 width: 100%;
 background: #fff;
 margin: 0px auto;
 box-shadow: 0px 2px 5px #888888;
}

header {
 width: 1024px;
 height: 70px;
 background: #fff;
 margin: 0px auto;
 overflow: hidden;
}

header > h1 {
 color: #3498db;
 font-size: 3.0em;
 position: fixed;
}

h1, h2, h3, h4, h5, h6 {
 font-family: 'Roboto', sans-serif;
}

nav {
 float: right;
 font-size: 1.5em;
 width: auto;
 padding-top: .938em;
}

nav ul {
 list-style: none;
}

nav li {
 display: inline;
}

nav a:link, nav a:active, nav a:visited {
 color: #3498db;
 padding: 5px 13px;
 text-decoration: none;
}

.splash {
 float: right;
 background-color: #3498db;
 height: auto;
 width: 100%
}

.splash-image {
    display: block;
    position: relative;
    float: right;
    width: 96px;
    height: 140px;
}

.h1-splash-color {
 color: #fff;
 font-size: 3.0em;
 overflow: hidden;
}

<body>
 <div class="header-wrap">
     <header>
      <h1>TimSully</h1>
      <nav>
       <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
      </nav>
     </header>
 </div>
 
 <section class="splash">
 
 <div class="h1-splash-color">
   <h1 class="#">Hello.</h1>
   <h1 class="#">I'm Tim,</h1>
   <h2 class="#">UI/Web Developer</h2>
 </div>
</body>

andreas · Answer 1 · 2017-03-06T06:53:03.270

Just use:

.h1-splash-color h1 {
    margin: 0; /*
}

Browsers give headings a default margin, which you have to overwrite, if you don't want it.

body {
  font-size: 62.5%;
  margin: 0px auto;
}

.header-wrap {
  width: 100%;
  background: #fff;
  margin: 0px auto;
  box-shadow: 0px 2px 5px #888888;
}

header {
  width: 1024px;
  height: 70px;
  background: #fff;
  margin: 0px auto;
  overflow: hidden;
}

header>h1 {
  color: #3498db;
  font-size: 3.0em;
  position: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
}

nav {
  float: right;
  font-size: 1.5em;
  width: auto;
  padding-top: .938em;
}

nav ul {
  list-style: none;
}

nav li {
  display: inline;
}

nav a:link,
nav a:active,
nav a:visited {
  color: #3498db;
  padding: 5px 13px;
  text-decoration: none;
}

.splash {
  float: right;
  background-color: #3498db;
  height: auto;
  width: 100%
}

.h1-splash-color {
  color: #fff;
  font-size: 3.0em;
  overflow: hidden;
}

.h1-splash-color h1 {
  margin: 0; /* <- this does the trick */
}

<div class="header-wrap">
  <header>
    <h1>TimSully</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

<section class="splash">
  <div class="h1-splash-color">
    <h1 class="#">Hello.</h1>
    <h1 class="#">I'm Tim,</h1>
    <h2 class="#">UI/Web Developer</h2>
  </div>
</section>

score 2 · Answer 2 · edited Jun 29 '18 at 05:27

2

You'll have to override the default style set by browsers use.

h1 {
  margin:0;
  padding:0;
}

Also look at CSS resets.

edited Jun 29 '18 at 05:27

Exil

311
2
11
26

answered Mar 06 '17 at 06:54

Purushotham

31
5

score 1 · Answer 3 · answered Mar 06 '17 at 07:15

Set padding and margins of heading tags to 0. But then headings will touch each other. So give a little padding/margin to your heading tags. If you don't want to give padding or margin at all then set the line-height property of headings more than their font-size.

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

score 0 · Answer 4 · answered Mar 06 '17 at 06:58

use margin:0 where you want to get rid of "ghost padding".

If you want to remove the padding between h1 only then add this rule to your css:

h1{
  margin:0;
}

of if you want to remove padding among all headings then put this.

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

How do I get rid of this ghost padding on my h1? HTML & CSS

4 Answers4

Related