CODEWITHSUNDEEP
htmlcss
Chrissy
Chrissy

Reputation: 1

How to remove my whitespace between h1 and h2 or how to get it to what i want

Current design that it is showing as in webbrowser

What I want it to look like

Hi Team,

I am trying to design my header for my website and I want to remove the white space between the H1 and H2 so that it all looks like one item - as I will be doing different font for each heading. Below is my HTML and CSS. I have tried to use margins and paddings but that did not seem to work - any help please.

Thank You

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
.header {
  width:1200px;
  position: relative;
}
  .header img {
    float: left;
}
  .header h1 {
    font-size: 
    margin:0;
    padding:0;
    background-color: #666600;
}
.header h2 {
    font-size: 
    margin:0;
    padding:0;
    background-color: #666600;
}
 <body>
   <div class="header">
    <img src="https://kapaifuel.neocities.org/Resources/KaPaiLogo.png" alt="KaPaiLogo" />
    <h1>KA PAI FUEL CAFÉ </h1> 
    <h2>Whangaihia to tinana ki te kai / Nourish you body with organic kai</h2>
   </div>
  </body>

Upvotes: 0

Views: 664

Answers (2)

wch
wch

Reputation: 304

Add line-heigth: 1 to this code

.header .H1, .H2 {
    font-size: 35px;
    margin:0;
    padding:0;
}

Upvotes: 1

gsharew
gsharew

Reputation: 283

You need to use label or span whatever your choice. that is becuase "h" tag elements are block element by nature. they have a big line height between them.

   body {
    background-color: white;
    color: black;
    font-family: Verdana;
  }
  .header {
    width:1200px;
    position: relative;
    background:#666600;
  }
    .header img {
      float: left;
  }
  .header .label1, .label2 {
        font-size: 35px;
        margin:0;
        padding:0;
    }

    .header .label2 {
        font-size: 30px;
    }
   <body>
     <div class="header">
      <img src="https://kapaifuel.neocities.org/Resources/KaPaiLogo.png" alt="KaPaiLogo" />
      <label class="label1">KA PAI FUEL CAFÉ </label> <br>
      <label class="label2">Whangaihia to tinana ki te kai / Nourish you body with organic kai</label>
     </div>
    </body>

Upvotes: 0

Related Questions