SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot CatsEyeDesigns's Avatar
    Join Date
    Dec 2003
    Location
    Florida
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css line spacing for h1-h6 tags

    Hello,

    Is there a way using CSS, to adjust the amount of space around a heading (h1, h2, h3...)?

    For example, if you type:

    Code:
    Some text
    <h5>A heading</h5>
    some more text.
    it ends up looking something like this.

    Some Text


    A heading


    Some more text



    But can you use css to make it display something like this:
    Some Text
    A heading
    Some more text

    The reason I ask is because I want to use headings in my pages to give search engines a better idea of what a page is about, but they're so ugly b/c they put so much unneccessary space around the text. I've tried line-height and padding but neither worked the way I want them to.

  2. #2
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ummm....try using padding and set your margin to 0px...

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by CatsEyeDesigns
    Hello,

    Is there a way using CSS, to adjust the amount of space around a heading (h1, h2, h3...)?

    For example, if you type:

    Code:
    Some text
    <h5>A heading</h5>
    some more text.
    it ends up looking something like this.

    Some Text


    A heading
    Some more text



    But can you use css to make it display something like this:
    Some Text
    A heading
    Some more text

    The reason I ask is because I want to use headings in my pages to give search engines a better idea of what a page is about, but they're so ugly b/c they put so much unneccessary space around the text. I've tried line-height and padding but neither worked the way I want them to.

    It isn't the heading's padding that gives you the problem. It's pre-set margins. Try

    Code:
    h5 {
    margin:0
    }
    if you want the heading right up against the paragraph before and after it. Adjust the margins to your liking, remembering they always go top, right, bottom, left. I use em's for units when working with text. One em is supposed to be (I think) the height of one character. So this:

    Code:
    h5 {
    margin:.5em 0;
    }
    would give you a top and bottom margin of .5em and a left and right margin of zero.

    This:

    Code:
    h5 {
    margin: .5em .5em 0;
    }
    will give you a top margin of .5em, a left and right margin of .5em and a bottom margin of 0

    Code:
    h5 {
    margin: .5em .5em 1em 1em;
    }
    gives you a top of .5em, right of .5em, bottom 1em and left 1em.

    Hope this helps.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just to add to Shyflowers explanation (if you haven't worked it out already) you will also need to control the margins on the elements following the headings.

    Even if you set the header margins to zero the margin on the element following the heading will come into effect e.g. <p>some other text</p> (unless you don't use the p tag but that's bad practice anyway )

    So if you want the elements really close you will need to reduce the top margin on the <p> element also (or whatever element you use to follow.)
    e.g. p {margin-top:0}

    Where margins between elements are concerned the largest margin applies and the smallest margins collapse. This means that margins are not cumulative.
    (Floats have their own rules for margins which I wont explain here).

    Hope that helps.

    Paul

  5. #5
    SitePoint Zealot CatsEyeDesigns's Avatar
    Join Date
    Dec 2003
    Location
    Florida
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all.... margins. Go figure. It seems so simple, but I've only used margins before when I have a design that needs to fill the width of a page and I don't want a space around my content. Never thought to use it anywhere else, so it didn't even occur to me that margins could be use or that there is a default margin for heading tags.

    Thanks again.

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple rule: when you start messing with margins and/or padding cross-browser, life is often simpler if you explicitly set both of them.

    Some browsers use margins to generate the extra space around headings, other browsers use padding. It's the same story on lists, list items, paragraphs, etc.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •