#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Nuevo Mexico, U.S.
    Posts
    86
    Rep Power
    12

    Changing spacing on <H1> using CSS?


    I've got a line of defined as "h1" and I'd like to stop it from spacing itself so far away from the following text. Ideally, I'd like to stop it from performing a line-break too but that's probably asking too much.

    I've tried the line-height property in CSS but it did nothing in this situation. Anyone know how to affect the behavior of the <h1> tag using CSS?

    I know I can do whatever I want with the text but in this case I need to do it with the "h1" tag.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Change the margins with CSS
    Because the element after the Header will also have margins you also have to alter it's margins.

    <h1 style="margin: 0px;">Header H1</h1>
    <p style="margin: 0px;">Paragraph </p>

    or

    <h1 style="margin-bottom: 0px;">Header H1</h1>
    <p style="margin-top: 0px;">Paragraph</p>
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Also:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    h1.inline {
    display: inline;
    }

    h1.short {
    line-height: 0%;
    }

    h1.styled {
    font: bold 32px monospace;
    color: #cc3300;
    }

    </style>
    </head>
    <body>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    <h1>Normal HTML H1 element</h1>
    blah blah blah <h1 class="inline">"Inline" H1 element </h1>blah blah blah blah blah blah
    <h1 class="short">"Short" H1 element</h1>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    <h1 class="styled">&amp;#149;&amp;nbsp;"Styled" H1 element&amp;nbsp;&amp;#149;</h1>
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Nuevo Mexico, U.S.
    Posts
    86
    Rep Power
    12
    The display: inline worked great. Actually it was the only thing I needed to add because I had already styled the h1 text to be the same as the surrounding text.

    Thanks for both your inputs. My CSS search had come up empty and I knew of line-height but for some odd reason I could not get it to work.

IMN logo majestic logo threadwatch logo seochat tools logo