6

CSS: Spacing after a header

over 9 years ago from , Former Lead Designer at Zentrick

Example: You have a multi-line h1 header with a certain line height, followed by a multi-line block of body text with a different line height.

How do you separate both? Do you solely rely on their line heights? Or do you add margins? How much?

I usually get rid of top margins — because they push the first level of headers down — and use only bottom margins to separate headers.

Of course, the space in between depends on the application and on personal taste, but I'm wondering if there are benefits to using either margins or line heights. Or mixing both.

8 comments

  • Justin WoodsJustin Woods, over 9 years ago

    I always stick with the rule of line-height and margin-bottom. I use margin-bottom as much as possible for overall consistency and to avoid clashing of one element's margin-top with another's margin-bottom.

    1 point
  • Nicholas HendrickxNicholas Hendrickx, over 9 years ago

    Thanks for the comments everyone!

    0 points
  • Derryl CarterDerryl Carter, over 9 years ago

    TL;DR -- use the correct line-height for displaying your text, and space them apart using margins.

    This article on Smashing Magazine outlines some great concepts for handling this sort of stuff.

    For text objects, you should set the line-height to however you'd like it to appear when there are multiple lines – and use either padding/margin to achieve spacing between it and the next element. There are exceptions to this, of course – but it certainly applies for most headers, paragraphs, lists, etc.

    Top vs. bottom margin doesn't really matter, but I advise choosing one and sticking with it across all of your elements. This way you don't have "top margin on this", "bottom margin on that" confusion.

    At the end of the day, you'll have to ignore the margin on :first/:last-child anyways, to prevent having extra white-space at top/bottom of your container.

    0 points
  • Nemanja NenadicNemanja Nenadic, over 9 years ago

    Whatever gets the job done!

    0 points
  • Nicholas HendrickxNicholas Hendrickx, over 9 years ago

    Also, do you go for a logical distance between baselines OR between descenders and ascenders OR x-height reference line? I've been always doing what looked right, but I wonder if there's any best practices on this too.

    0 points
    • Steve HickeySteve Hickey, over 9 years ago

      I tend to try and use a baseline grid that's based on a multiple of the body text's line-height. So, if my body text is 16px on 24px, my h1 might be 44px on 48px, and then I adjust the bottom margin on the h1 to get the paragraph text's baseline on an interval of the h1's baseline. Takes a TON of tweaking, and there's always going to be some browser that screws it up for you, but it has a nice effect where it works.

      1 point
  • Oscar MarceloOscar Marcelo, over 9 years ago

    I personally use both.

    Line-height is, most of the times, not enough to separate those. And if the heading is able to be multi-line, then a smaller line-height is practically obligatory and obviously I have to increase the margin-bottom.

    That's the way I do.

    0 points