[headbirth]

The p tag places alot of space between paragraphs. I've tried adjusting the line height for the tag, but it only adjusts the lives within the tag. Is it the body tag or another that adjusts the leading between p tags?

[Macola]

You can do this by defining box properties (not sure about browser support, though). For example, say I define a class called "nospace", then:

Code:
p.nospace {
	margin-top: 0px;
	margin-bottom: 0px;
}

For more, see:
http://www.htmlhelp.com/reference/css/properties.html

[Simon Mundy]

I think IE for PC also uses padding in a paragraph, so for consistency use a 0px for padding, then adjust your margins as necessary.

[Millennium]

As Macola pointed out, the best way to take out the space between paragraphs is to adjust the top and bottom margins.

Note that most browsers set the spacing to about 0.5em each, top and bottom. This provides a 1em space between paragraphs, with an 0.5em space above the first paragraph and an 0.5em space below the last.

[Macola]

And, in case you were wondering, 1 em = the height of the font used in the paragraph. I couldn't resist adding one more link:

http://www.alistapart.com/articles/dao/

[Synotic]

Originally posted by Simon Mundy:
I think IE for PC also uses padding in a paragraph, so for consistency use a 0px for padding, then adjust your margins as necessary.

I don't recall ever having seen this or having any problems with it. I believe that simply a margin is set.

If you want to have consistent spacing... say 1em between each paragraph and 1em at the top of the first paragraph and 1em and the bottom of the last... That easiest way I've found to do it with the least amount of code is:

Code:
<div id="content">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</div>

#content { padding: 1em 0 0; border: solid 1px #000 }
p { margin: 0 0 1em }

Basically, there's a 1em margin at the bottom of each paragraph, and then an extra padding added to the top of the container... which gives you equal spacing everywhere, with minimal code.

And I doubt I'll change anyone, but Zeldman soured me on it... '0px' just seems rather unclean. Like saying 0 inches or 0cm. If you run your code through a CSS validator, it's "Valid CSS info" section, will just leave off any units for 0s... and you'll notice all the famous CSS designers leave off the "px"... Zeldman, Bowman etc... It's a pointless pet peeve, but I'm saying it anyways

[Simon Mundy]

Originally posted by Synotic:
And I doubt I'll change anyone, but Zeldman soured me on it... '0px' just seems rather unclean. Like saying 0 inches or 0cm. If you run your code through a CSS validator, it's "Valid CSS info" section, will just leave off any units for 0s... and you'll notice all the famous CSS designers leave off the "px"... Zeldman, Bowman etc... It's a pointless pet peeve, but I'm saying it anyways

Fair point - 0 is just plain 0 in any measurement!

[wataru]

While we're nitpicking, is it really valid to only specify three out of the four values for things like margin, padding, etc.?

[Oisín]

Originally posted by wataru:
While we're nitpicking, is it really valid to only specify three out of the four values for things like margin, padding, etc.?

I could be wrong on this, but as far as I know, it is. When you specify these four values, you do it clockwise, starting from top (ie. top, right, bottom, left). If you only specify two, they are top and right, and the browser will assume that the next to will be the same (ie. "border-width: 0 2px;" would be the same as "border-width: 0 2px 0 2px;"). If you specify a third value, but not a fourth, it should be handled so that the second value specified will be repeated as the fourth one (ie. "border-width: 0 2px 1em;" would be the same as "border-width: 0 2px 1em 2px;"). That makes sense, right? It did in my head, anyway...

[Millennium]

Originally posted by wataru:
While we're nitpicking, is it really valid to only specify three out of the four values for things like margin, padding, etc.?

Yes. If I recall correctly, when you specify three values you specify the top, then the bottom, then the value which will be used for both the left and right sides.

[EDIT: Never mind; Oisin is correct. Three values specified the top, the left/right, and then the bottom.]

[Synotic]

Originally posted by Oisín:
I could be wrong on this, but as far as I know, it is. When you specify these four values, you do it clockwise, starting from top (ie. top, right, bottom, left). If you only specify two, they are top and right, and the browser will assume that the next to will be the same (ie. "border-width: 0 2px;" would be the same as "border-width: 0 2px 0 2px;"). If you specify a third value, but not a fourth, it should be handled so that the second value specified will be repeated as the fourth one (ie. "border-width: 0 2px 1em;" would be the same as "border-width: 0 2px 1em 2px;"). That makes sense, right? It did in my head, anyway...

I don't know.. I think you understand it, but wrote it kind of confusingly Only two is "top/bottom" and then "left/right". Brief explanation of all the shorthand...

• margin: 0 — applies to all four sides
• margin: 0 0 — Top/bottom & left/right. If you see something like 'margin: 10px 20px 10px 20px', then you can chop off the last two values, as it's the same thing.
• margin: 0 0 0 — I like to think of this somewhat like a sandwich. Top, left/right, bottom. If you ever see something like "margin: 10px 5px 3px 5px", then you can cut off the last value, because the left and right are the same.
• margin: 0 0 0 0 — clockwise, starting from the top or TRBL (trouble) is another way to remember it.

You'll notice that they all somewhat follow a pattern... also if you remember some of the "tricks", then it's pretty easy to remember. Oh, and it's the same with padding, border-width etc...

[wataru]

Originally posted by Synotic:
I don't know.. I think you understand it, but wrote it kind of confusingly Only two is "top/bottom" and then "left/right". Brief explanation of all the shorthand...

• margin: 0 — applies to all four sides
• margin: 0 0 — Top/bottom & left/right. If you see something like 'margin: 10px 20px 10px 20px', then you can chop off the last two values, as it's the same thing.
• margin: 0 0 0 — I like to think of this somewhat like a sandwich. Top, left/right, bottom. If you ever see something like "margin: 10px 5px 3px 5px", then you can cut off the last value, because the left and right are the same.
• margin: 0 0 0 0 — clockwise, starting from the top or TRBL (trouble) is another way to remember it.

You'll notice that they all somewhat follow a pattern... also if you remember some of the "tricks", then it's pretty easy to remember. Oh, and it's the same with padding, border-width etc...

Yes, yes, I understand all that. I specify things with one, two, and four values all the time in my own code. I just don't think three is valid. At least that's what my gut says.

By the way, I remember the four value order with the mnemonic "trouble:" TRBL = top, right, bottom, left.

[Millennium]

Originally posted by wataru:
Yes, yes, I understand all that. I specify things with one, two, and four values all the time in my own code. I just don't think three is valid. At least that's what my gut says.

It's valid. It's right in the spec.

The way the spec says it is as follows:
One value - one value, all four sides
Four values - one value per side
Two or three: One value per side; for each unspecified side, take its value from the opposite side (which is, by definition, specified).

So, to show exactly how it works:

ONE VALUE: 5px
Top = 5px
Right -> Top = 5px
Bottom -> Top = 5px
Left -> Right -> Top = 5px

TWO VALUES: 5px 3px
Top = 5px
Right = 3px
Bottom -> Top = 5px
Left -> Right = 3px

THREE VALUES: 5px 3px 1px
Top = 5px
Right = 3px
Bottom = 1px
Left -> Right = 3px

Four values should be self-explanatory.