Web typography: bottom margins of paragraphs and lists
Creating the perfect vertical space on the screen is easy. With a few lines of CSS, you’ll have a great typography foundation for your web site. Let’s begin…
Global line height is usually set to html or body element. In this quick lesson, we’ll use a line height of 1.5.
* { margin: 0; padding: 0; }
html { font: 62.5%/1.5 "Lucida Grande", Verdana, sans-serif; }
You’ll also notice that we reset margins and paddings globally with the universal selector.
Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to element’s line height ensures correct vertical rhythm.
ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }
Most often—for various reasons—you don’t want to set font size of a block-level element that by default must have block-level children, like for instance unordered list must have. You would instead specify font size for list items, definition terms and definition descriptions:
li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl, p { margin-bottom: 1.5em; }
Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying element’s line-height by child element’s font size (1.5 × 1.2em = 1.8em)
li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.8em; }
p { margin-bottom: 1.5em; }
Use the same principle when dealing with other elements: headings, tables etc., and within a minutes a sound vertical spacing will be accomplished. Still hungry? Head on to Compose to a Vertical Rhythm.
Addenum
This article is also available in Russian. Big thanks goes to Errant.
21 Comments
Great technique ang guidelines. Thanks Marko, going to try in my blog.
Comment (#) by obvious — 13th May 2007.
Web typography is one thing that I’ve been recently trying to become more familiar with.
Thanks for sharing.
Comment (#) by Matt — 13th May 2007.
A simple example of what your CSS actually does would be greatly appreciated. Of course, we can do it ourselves, but everybody got used to seeing “Example 1″ hyperlink to view the results of particular code.
Comment (#) by Bartosz Olchówka — 13th May 2007.
Don’t forget to define list inside lists etc.
Comment (#) by Wolf — 13th May 2007.
you shouldnt reset with * – that will screw up the margins and paddings for Form elements, like inputs. Just a make a list of all the relevant elements. Nice tip apart from that…
Comment (#) by luke — 13th May 2007.
Wolf, good point. However, that’s a story for another time.
Luke, reset method is to everyone’s personal taste. I felt that for the purpose of this article, it’s adequate. Thanks for the tip!
Comment (#) by marko — 14th May 2007.
I like it!
Until now, I doesn’t know a good method to define a margin-bottom to paragraphs and lists…
Thank you for sharing it :)
Comment (#) by Carlos Eduardo — 14th May 2007.
Thanks for sharing Marko! I’ve translated this article into russian and added some quick ‘n dirty example.
Comment (#) by Errant — 14th May 2007.
Remove the last dot in the link for it to work ( sorry, my mistake :] )
Comment (#) by Errant — 14th May 2007.
thanks for the article. I wanted to do a typography overhaul since I launched my own site (which is not long, I admitt…) but this article gave me some ideas on how to do it.
Comment (#) by squawk — 15th May 2007.
Errant, thanks for the translation!
Comment (#) by marko — 15th May 2007.
li, dt, dd, p { font-size: 1.2em; }will be a problem if you put block-level elements inside another block-level element. Font-sizes are inherited by default, and 1.2em means basically 120%. Try putting a paragraph inside a list item, or simply a nested list and you’ll see it grow out of proportion.I prefer setting the font-size higher in the document tree, f.ex in #content.
Comment (#) by David Hellsing — 15th May 2007.
David, thanks for your remark.
Placing a block-level element inside definition term or paragraph is a symptom for a developer that she should probably reconsider the HTML structure.
In real life scenario I’d add something like:
dd *, li * { font-size: 1em; }as a default rule and override it later on if neccessary (I guess that one doesn’t place block-level elements insideddorlivery often).Comment (#) by marko — 15th May 2007.
dd *, li * { font-size: 1em; }is a nice trick!You really think a nested list would be inappropriate HTML?
<ul> <li> <ul> <li> </li> </ul> </li> </ul>is something I use in almost any web project. And simply puttingli { font-size: 1.2em; }would make the second li inherit the first font-size. Unless you compensate for it. That’s my point.Comment (#) by David Hellsing — 15th May 2007.
David, nested lists are appropriate in many cases (my comment on reconsidering markup structures was only regarding the block-level elements nested inside paragraphs and/or definition terms).
The original topic is more about how to handle vertical space in body text (the primary area of a page). Nested lists are mostly used for various navigational and supplementary elements.
Actually, when developing web sites I use more specific selectors, for instance
#main_content liand set rules for navigation and other supplementary content with their specific selectors.Comment (#) by marko — 15th May 2007.
I didn’t mean to jump off topic here, just thought it was worth noting the inherited font-size issue in nested elements. There are also issues with vertical rythm when dealing with nested elements. As long as you have full control over the HTML it shouldn’t be a problem. But when dealing with content management systems for clients, you’d have to make sure it looks good whatever tags the prefer to use (as long as it’s valid!)
Comment (#) by David Hellsing — 15th May 2007.
A client generated markup… tell me about it : )
Comment (#) by marko — 15th May 2007.
I really like the concept of giving p elements a bottom margin. This is especially useful in WordPress, which strips away extra line spaces away from comments and posts. By giving a generous bottom margin to p elements, you don’t really miss being able to add extra line spaces.
Comment (#) by Chris Coyier — 19th September 2007.
This CSS typography trick is not unfortunately complete. For instance, you should use p.last {margin: 0;} to avoid spacing problems in your design.
Comment (#) by plasebo — 21st September 2007.
That’s a great tip Marko - Thank you!
BTW, that’s a very nice website you’ve got… (so many solutions I like so much that I want to incorporate them in my site)
Comment (#) by Dom Delimar — 22nd September 2007.
I really like the concept of giving p elements a bottom margin
Comment (#) by Çadır — 12th December 2007.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.