Grow your CSS skills. Land your dream job.

Making my h1 and h2 text vertically closer to one another.

  • # August 21, 2009 at 12:02 am

    Right now there is a huge gap between my h1 and h2 text in the header of my page. I can’t figure how how to get them closer to one another.

    CSS
    [HTML]
    #header { background:url(/assets/images/header.png) no-repeat; height: 174px; width: 650px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px;
    }

    h1 {
    font: Times New Roman, Times, serif, sans-serif, Arial;
    font-size: 40px;
    color:#CCCCCC;
    text-transform:capitalize;
    text-align:center;
    padding-top: 50px;
    }
    h2 {
    font: Times New Roman, Times, serif, sans-serif, Arial;
    font-size:10px;
    color:#CCCCCC;
    text-align: center;
    }
    [/HTML]

    HTML
    [HTML]
    <div id="header">
    <h1>TEXT</h1>
    <h2>Text Text Text Text</h2>
    </div>
    [/HTML]

    Any idea how i can fix it?

    Here is a link to my test page.
    http://www.gamerunion.com/test.html

    # August 21, 2009 at 12:21 am

    Fixed it on my own. by adding a class for line height.

    h1.small {line-height: 20%}
    h2.small {line-height: 10%}

    <h1 class="small">Hello</h1>
    <h2 class="small">Hello</h2>

    # August 21, 2009 at 8:43 am

    Why not set the padding and margin on both headings to 0px (except for your top-padding), and set your line-height for both in px values?

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