{"id":226,"date":"2007-05-12T23:28:44","date_gmt":"2007-05-12T21:28:44","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2007\/05\/12\/quick-tip-bottom-margins-of-paragraphs-and-lists\/"},"modified":"2012-12-21T16:36:59","modified_gmt":"2012-12-21T15:36:59","slug":"quick-tip-bottom-margins-of-paragraphs-and-lists","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2007\/05\/12\/quick-tip-bottom-margins-of-paragraphs-and-lists\/","title":{"rendered":"Web typography: bottom margins of paragraphs and lists"},"content":{"rendered":"

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\u2019s begin\u2026<\/p>\n

Global line height is usually set to the html or body element. In this quick lesson, we\u2019ll use a line height of 1.5.<\/p>\n

* { margin: 0; padding: 0; }\r\nhtml { font: 62.5%\/1.5 \"Lucida Grande\", Verdana, sans-serif; }\r\n<\/code><\/pre>\n
You will notice that I globally reset margins and paddings with the universal selector.<\/p>\n
Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to the element\u2019s line height ensures correct vertical rhythm.<\/p>\n
ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }\r\n<\/code><\/pre>\n
Most often \u2014 for various reasons \u2014 you don\u2019t 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:<\/p>\n
li, dt, dd, p { font-size: 1.2em; }\r\nul, ol, dl, p { margin-bottom: 1.5em; }\r\n<\/code><\/pre>\n
Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying the element\u2019s line-height by the child element\u2019s font size (1.5 x 1.2em = 1.8em<\/code>)<\/p>\n
li, dt, dd, p { font-size: 1.2em; }\r\nul, ol, dl { margin-bottom: 1.8em; }\r\np { margin-bottom: 1.5em; }\r\n<\/code><\/pre>\n
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<\/a>.<\/p>\n
Addenum<\/h3>\n
This article is also available in Russian<\/a>. Big thanks goes to Errant<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bottom margins with CSS<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,16],"tags":[25,33],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/226"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}