golivebasics.com home page

Page 1 - why css?
Page 2 - an internal style sheet; about fonts
Page 3 - define some elements; elements vs classes
Page 4 - more elements; some classes
Page 5 - turn an internal into an external style sheet
Page 6 - an external style sheet from scratch
Page 7 - different coloured links on a page
Page 9 - learn more

Cascading style sheets part 8 - paragraph spacing

To alter the space between paragraphs there is one simple, foolproof method and one slightly more complicated one that works most of the time.

The easy one is just to do shift-return at the end of a line - this sends your text to the next line but doesn't make a new paragraph. So if you're using css the look remains the same, if you're in a bullet list you won't make a new bullet point, if you're using a header style that continues to the next line.

But .... it always works and it takes out the space between chunks of text. Just takes it out, doesn't modify it.

The second way uses css. Thanks at this point to all the kind people who helped me test this on various browsers and platforms.

Define or redefine the p element in your style sheet - if you only want this effect on some pages, and it's an external style sheet, open your external style sheet, save a copy of it under a different name such as pspace.css and save it into your website folder. Unlink the previous external style sheet and link the new one instead.

Now redfine the p tag like this like this:

And this - use the fourth tab on the css inspector to set the bottom margin. Now your paragraphs will have a small space below them.

If you want some paragraphs to have a different spacing, make a class called something like .bottommargin20, change the margin and apply it by putting your cursor in a paragraph and applying it via the css palette - use 'Para'.

All this is OK except in 3 or 4 versions or sub-versions of Netscape 4, but you can't have everything. If total browser compatibility is all, don't use the margin setting.

Be careful about using different paragraph spacings in the same chunk of text - margins 'collapse' (thanks Freda).

That is, if two different margins are 'facing each other', that is a margin below one paragraph and another above the next paragraph, only the larger one will show up. Most of the time.

golivebasics.com home page