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/ Hypertext rulez™ Wed, 23 Mar 2011 22:34:00 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Çadır http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8557 Çadır Wed, 12 Dec 2007 10:31:03 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8557 I really like the concept of giving p elements a bottom margin I really like the concept of giving p elements a bottom margin

]]> By: Dom Delimar http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8401 Dom Delimar Sat, 22 Sep 2007 12:38:29 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8401 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) 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8398 plasebo Fri, 21 Sep 2007 08:50:48 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8398 This CSS typography trick is not unfortunately complete. For instance, you should use p.last {margin: 0;} to avoid spacing problems in your design. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8393 Chris Coyier Wed, 19 Sep 2007 14:25:45 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-8393 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. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7597 marko Tue, 15 May 2007 10:30:11 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7597 A client generated markup... tell me about it : ) A client generated markup… tell me about it : )

]]> By: David Hellsing http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7596 David Hellsing Tue, 15 May 2007 09:46:41 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7596 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!) 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7595 marko Tue, 15 May 2007 09:12:46 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7595 David, nested lists <em>are</em> 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 <code>#main_content li</code> and set rules for navigation and other supplementary content with their specific selectors. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7594 David Hellsing Tue, 15 May 2007 08:36:02 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7594 <code>dd *, li * { font-size: 1em; }</code> is a nice trick! You really think a nested list would be inappropriate HTML? <code><ul> <li> <ul> <li> </li> </ul> </li> </ul></code> is something I use in almost any web project. And simply putting <code>li { font-size: 1.2em; }</code> would make the second li inherit the first font-size. Unless you compensate for it. That's my point. 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 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7593 marko Tue, 15 May 2007 08:12:21 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7593 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: <code>dd *, li * { font-size: 1em; }</code> as a default rule and override it later on if neccessary (I guess that one doesn’t place block-level elements inside <code>dd</code> or <code>li</code> very often). 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7592 David Hellsing Tue, 15 May 2007 07:40:52 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7592 <code>li, dt, dd, p { font-size: 1.2em; }</code> will be a problem if you put block-level elements <em>inside</em> 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. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7591 marko Tue, 15 May 2007 06:46:48 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7591 Errant, thanks for the translation! Errant, thanks for the translation!

]]> By: squawk http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7587 squawk Tue, 15 May 2007 00:05:40 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7587 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. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7585 Errant Mon, 14 May 2007 16:32:51 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7585 Remove the last dot in the link for it to work ( sorry, my mistake :] ) Remove the last dot in the link for it to work ( sorry, my mistake :] )

]]> By: Errant http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7583 Errant Mon, 14 May 2007 16:30:27 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7583 Thanks for sharing Marko! I've <a href="http://webgrower.ru/articles/layout-and-scripting/web-typography-bottom-margins.html">translated this article into russian</a> and added some <a href="http://webgrower.ru/examples/web-typography-bottom-margins-example.html">quick 'n dirty example</a>. Thanks for sharing Marko! I’ve translated this article into russian and added some quick ‘n dirty example.

]]> By: Carlos Eduardo http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7581 Carlos Eduardo Mon, 14 May 2007 14:03:41 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7581 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 :) 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7577 marko Sun, 13 May 2007 23:06:13 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7577 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! 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7575 luke Sun, 13 May 2007 17:15:38 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7575 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... 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7573 Wolf Sun, 13 May 2007 14:00:45 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7573 Don't forget to define list inside lists etc. Don’t forget to define list inside lists etc.

]]> By: Bartosz Olchówka http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7571 Bartosz Olchówka Sun, 13 May 2007 10:18:46 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7571 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. 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 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7570 Matt Sun, 13 May 2007 06:35:39 +0000 http://www.maratz.com/blog/archives/2007/05/12/quick-tip-bottom-margins-of-paragraphs-and-lists/#comment-7570 Web typography is one thing that I've been recently trying to become more familiar with. Thanks for sharing. Web typography is one thing that I’ve been recently trying to become more familiar with.
Thanks for sharing.

]]>