Subscribe: Comments on: Web typography: bottom margins of paragraphs and lists
http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/feed/
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
block level  bottom  code code  code size  code  elements  inside  list  marko  nested  size code  size  typography  web typography  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Comments on: Web typography: bottom margins of paragraphs and lists

Comments on: Web typography: bottom margins of paragraphs and lists



Hypertext rulez™



Last Build Date: Mon, 21 Jul 2014 14:12:49 +0000

 



By: Çadır

Wed, 12 Dec 2007 10:31:03 +0000

I really like the concept of giving p elements a bottom margin



By: Dom Delimar

Sat, 22 Sep 2007 12:38:29 +0000

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)



By: plasebo

Fri, 21 Sep 2007 08:50:48 +0000

This CSS typography trick is not unfortunately complete. For instance, you should use p.last {margin: 0;} to avoid spacing problems in your design.



By: Chris Coyier

Wed, 19 Sep 2007 14:25:45 +0000

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.



By: marko

Tue, 15 May 2007 10:30:11 +0000

A client generated markup... tell me about it : )



By: David Hellsing

Tue, 15 May 2007 09:46:41 +0000

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!)



By: marko

Tue, 15 May 2007 09:12:46 +0000

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 li and set rules for navigation and other supplementary content with their specific selectors.



By: David Hellsing

Tue, 15 May 2007 08:36:02 +0000

dd *, li * { font-size: 1em; } is a nice trick! You really think a nested list would be inappropriate HTML?
is something I use in almost any web project. And simply putting li { font-size: 1.2em; } would make the second li inherit the first font-size. Unless you compensate for it. That's my point.



By: marko

Tue, 15 May 2007 08:12:21 +0000

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 inside dd or li very often).



By: David Hellsing

Tue, 15 May 2007 07:40:52 +0000

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.



By: marko

Tue, 15 May 2007 06:46:48 +0000

Errant, thanks for the translation!



By: squawk

Tue, 15 May 2007 00:05:40 +0000

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.



By: Errant

Mon, 14 May 2007 16:32:51 +0000

Remove the last dot in the link for it to work ( sorry, my mistake :] )



By: Errant

Mon, 14 May 2007 16:30:27 +0000

Thanks for sharing Marko! I've translated this article into russian and added some quick 'n dirty example.



By: Carlos Eduardo

Mon, 14 May 2007 14:03:41 +0000

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 :)



By: marko

Sun, 13 May 2007 23:06:13 +0000

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!



By: luke

Sun, 13 May 2007 17:15:38 +0000

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...



By: Wolf

Sun, 13 May 2007 14:00:45 +0000

Don't forget to define list inside lists etc.



By: Bartosz Olchówka

Sun, 13 May 2007 10:18:46 +0000

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.



By: Matt

Sun, 13 May 2007 06:35:39 +0000

Web typography is one thing that I've been recently trying to become more familiar with. Thanks for sharing.