treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] H1 & H2 Tags Adding Extra Line Space

  • Hello!

    When I label my text headers as h1 or h2 tags, there is extra space added above and below the line of text. The buttons above and below the text are literally being pushed away from the line of text. Not sure why this would do this. I have tried taking away the class applied to the td. I have also tried putting the h1 in the td tag, and I am getting the same results. here the code for the h1 tag, and how I am applying it:

    h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    font-style:italic;
    font-weight:bold;
    text-align:right;
    padding-right:10px;
    }

    <tr>
    <td class="td_top_slogan"><h1>Manufacturers of Quality Electrical Distribution Switchgear Since 1962</h1></td>
    </tr>

    I am also attaching jpegs of the page with the text labeled as an H1 tag, and as the way I want it to look. The text that this is applied to is the line up at the top: Manufacturers of Quality Electrical Distribution Switchgear Since 1962

    Please help :P
  • This is what header tags naturally do. To combat this, you simply need to reset them:

    h1, h2, h3, h4 {
    margin:0;
    padding:0;
    }
  • YES!! Changing the H1 to margin:0; did the trick! Thank you :D