Comments on: Hacking ‘paragraph spacing’ with CSS (despite IE)

By: CSS 设置段落间距 | Bolo的博客

CSS 设置段落间距 | Bolo的博客 — Wed, 27 Jan 2010 07:18:10 +0000

[...] 本文译自：Hacking ‘paragraph spacing’ with CSS (despite IE)。内容有删改。 Categories: Develop Tags: CSS, JavaScript [...]

By: Ian

Ian — Tue, 26 Jan 2010 10:51:25 +0000

Thanks, this is useful because I think that most headings tend to need both top and bottom margins/padding, regardless of whether the paragraphs have a bottom margin (ideally), or a top margin.

By: David Oliver

David Oliver — Tue, 26 Jan 2010 09:34:02 +0000

Thanks Harry. Think of the margin-top issue as more of an example of a particular situation that may sometimes come up – it’s not that I’m having problems. As mentioned in another comment, I usually use margin-bottom myself. I still believe it’s a potentially useful example, when applied to headings. Remember, it’s about maintaining flexibility – style and forget, as it were.

The aim of supporting Internet Explorer 6 (and 7 and 8) with CSS 2 and 3 selectors is more of a general thing – this is obviously more useful for other styling considerations than just paragraph/heading spacing.

By: Harry Roberts

Harry Roberts — Tue, 26 Jan 2010 09:00:29 +0000

By applying margin-bottoms and line-heights to your elements (be they textual or otherwise) you can alleviate the majority of the problems you seem to be encountering as well as achieving a much nicer (and easier) vertical rhythm.

Applying margin-tops seems to be causing you unnecessary grief, for which a hacks (especially JS dependent ones) are not the best solution.

By: David Oliver

David Oliver — Tue, 26 Jan 2010 05:50:32 +0000

A benefit of using #article > :first-child/last-child is that you don’t have to know which element comes first within the #article. Applying style specifically to h1 doesn’t give that flexibility, which can be useful in larger, less predictable documents.

By: jitendra vyas

jitendra vyas — Tue, 26 Jan 2010 03:47:49 +0000

usually we use once in a body then no need to give css .class or advanced selector to give {margin-top:0}. we can directly to h1{ margin-top:0}

By: David Oliver

David Oliver — Mon, 25 Jan 2010 12:07:49 +0000

Ha – of course. :) You can tell I haven’t been using these fancy new pseudo selectors much yet.

By: Bart van Heukelom

Bart van Heukelom — Mon, 25 Jan 2010 11:53:11 +0000

Or you can just use the simpler :last-child.

By: Tweets that mention Hacking ‘paragraph spacing’ with CSS (despite IE) -- Topsy.com

Mon, 25 Jan 2010 07:51:28 +0000

[...] This post was mentioned on Twitter by bkmacdaddy designs, Nicholas Patten, WPstudios, Pinceladas da Web, Richard Laksana and others. Richard Laksana said: Hacking ‘Paragraph Spacing’ with CSS – http://su.pr/1AGbOI [...]

By: David Oliver

David Oliver — Mon, 25 Jan 2010 06:05:48 +0000

Hi Kevin! Thanks for reading and your comment. I agree that using margin-bottom is usually easier for the reasons you mention. I think where this particular example could come into play even if you do use margin-bottom for paragraphs is when your headings (or whatever other element type that happens to be the first element in your containing element) have extra margin-top applied. Also, it might be useful to use both margin-top and margin-bottom on paragraphs, if its important that every paragraph has at least some margin either side throughout your document. This kind of CSS rule could also be useful in taking away the margin-bottom of the last element in a particular containing element (perhaps if the containing element already has its own padding-bottom for whatever reason) - the pseudo selector :nth-last-child(N) would then be used instead.