CSS coding

September 14, 2004 6:57 PM

CSSFilter: I'm not a coder by any means, so I'm stumbling through some CSS code for a single-page website. More inside ->

I'm using an internal style sheet (since there's only one page on the site) and I was wondering if there's a way to change the space between paragraphs of type. I have a line-spacing rule set to 140%, which is fine, but when I start a new paragraph, the space between paragraphs is too large. How can I lessen the "Space After" (to borrow a desktop publishing term) between paragraphs without altering the "leading" of the paragraphs themselves?

posted by robbie01 to Computers & Internet (8 answers total)

You want to play with either the margin-top or margin-bottom values or the padding-top or padding-bottom of your p. Play with it a bit and see what it looks like. One generally only adjusts one of the values (top or bottom), and sets the other to 0.
posted by dobbs at 7:04 PM on September 14, 2004

For example:

p {
margin: 0 0 1em 0;
line-height: 140%;
}
posted by dobbs at 7:32 PM on September 14, 2004

margin: 0 0 1em 0; (that's top, right, bottom, left)
padding: 0;

An em is basically the same as the font size, so the spacing will be proportional if the user changes the font size.
posted by kirkaracha at 7:36 PM on September 14, 2004

Response by poster: Thanks dobbs, margins seemed to do the trick. Silly me, I didn't investigate margins as I assumed they had to do with the space of the outer edges of a page as they do in a typical layout program. Crazy world, this CSS.
posted by robbie01 at 7:36 PM on September 14, 2004

robbie, they're like that if you apply the margin the body tag -- if you apply the margins to a paragraph, table, or image, then the margin affects the edges of that object.
posted by rafter at 9:57 PM on September 14, 2004

If you're going to be working with CSS some more, it's good to understand the box model and the difference between padding and margin (in short, padding is inside the bounding box of an element, margin is outside and vertical margins collapse).
posted by yerfatma at 5:15 AM on September 15, 2004

Yerfatma beat me to it. The box model is key to understanding this stuff.

Another point (that Hicks seems to skip) is "margin collapse." If you have two adjacent elements, their abutting margins do not add up: the smaller one is collapsed into the larger one. This confused the hell out of me for a long time.

There are a lot of excellent CSS resources out there. Here's a good roundup.
posted by adamrice at 7:09 AM on September 15, 2004

another good site
posted by Grod at 11:23 AM on September 15, 2004