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 can achieve a solid typography foundation for your web site. Let’s begin…

Global line height is usually set to the 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 will notice that I globally reset margins and paddings with the universal selector.

Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to the 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 should 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 the element’s line-height by the child element’s font size (1.5 x 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.