The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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.

    #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;
    padding-top: 50px;
    h2 {
    font: Times New Roman, Times, serif, sans-serif, Arial;
    text-align: center;

    <div id="header">
    <h2>Text Text Text Text</h2>

    Any idea how i can fix it?

    Here is a link to my test page.

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed