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

Current design that it is showing as in webbrowser

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 >
    <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>

CodePudding user response：

Add line-heigth: 1 to this code

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

CodePudding user response：

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 >
      <img src="https://kapaifuel.neocities.org/Resources/KaPaiLogo.png" alt="KaPaiLogo" />
      <label >KA PAI FUEL CAFÉ </label> <br>
      <label >Whangaihia to tinana ki te kai / Nourish you body with organic kai</label>
     </div>
    </body>

CodePudding user response：

@gsharew

I have updated the code to below and now this is my result - can you advise

@import url('https://fonts.googleapis.com/css2?family=Koulen&family=Shadows Into Light&display=swap');

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
.header {
  width:2000px;
  position: relative;
  background: #666600;
}
  .header img {
    float: left;
}
  .header .H1, .H2 {
    font-size: 35px;
    margin:0;
    padding:0;
}
.header .H1 {
    font-family:'Koulen', cursive;
}
.header .H2 {
    font-family: 'Shadows Into Light', cursive;
    font-size: 30px; 
}

<body>
   <div >
    <img src="https://kapaifuel.neocities.org/Resources/KaPaiLogo.png" alt="KaPaiLogo" />
    <label >KA PAI FUEL CAFE </label> <br>
    <label >Whangaihia to tinana ki te kai / Nourish you body with organic kai </label>
   </div>

CodePudding user response：

What my Header looks like now

How can I remove the white spacing around the top header i.e top,left and right and also the navigation - left and right?