Grow your CSS skills. Land your dream job.

[Solved] H1 & H2 Tags Adding Extra Line Space

  • # July 17, 2009 at 12:55 pm

    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

    # July 17, 2009 at 12:58 pm

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

    Code:
    h1, h2, h3, h4 {
    margin:0;
    padding:0;
    }
    # July 17, 2009 at 1:22 pm

    YES!! Changing the H1 to margin:0; did the trick! Thank you :D

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".