HTML style sheet: question!

I would like to reduce the “leading” or line spacing between two lines of text. But I can’t figure out what I need to do in the CSS coding to achieve this. I fiddled around with “line-height”, but that doesn’t seem to work. Could you help me? Thanks!
Here’s the CSS code that I put in the HEAD area.
<style type=“text/css”>


Here’s the BODY part of the webpage.
<P CLASS=“p.14”><b>Title Goes Here</b></p>
<P CLASS=“p.10”>This is the text under the title. Unfortunately, there is a
big space above this text.</P>
How do I reduce the amount of space between these two class elements?

Well, line-height should do it. Maybe you’d be better off using <div> tags with custom margin-bottom settings than paragraph breaks?

Well, line-height should do it. Maybe you’d be better off using <div> tags with custom margin-bottom settings than paragraph breaks?

No need to switch to DIV’s. P’s will do everything they will. Add this line:

p {margin: 0}

or, if you want to be more specific:

p.10 { margin-top: 0 }
p.14 { margin-bottom: 0 }

In general for this question, you’ll want to look at the default margin, border, and padding. Probably for P’s it’s margin that you want. You have to set it for both P’s, because the larger one will override a smaller one.

Also, there seems to be some problems with your class selectors. You want to say CLASS=“10”, not CLASS=“p.10”. Also, I tested it in Netscape, and a class attribute starting with a number does not work, although I can find nothing in the specs to explain why. I suggest changing your class names to something like ten instead of 10.

I found a place in the specs where it says not to begin your identifiers with numbers, so you should definitely change it.[

from the latter:

Your header paragraph has font 14 and height 17 … so your leading is the difference, 3, and you’ve added half of that above and below–1.5 pixels (not sure how it handles the half pixel…). Your body paragraph has font 10 and height 13 … so your leading is still 3. In theory, the spacing between the header/body and all of the body’s lines should be exactly the same.

Off the top of my head (since I’m not in the mood to test-run any CSS right now…), I’d say you should try reducing the line-height of your header paragraph (class p.14, that is). It can be smaller than the font size itself; so you might try font 14 and height 7, for instance.

I stand corrected. The line-height between paragraphs would seem to never get smaller than the font size.

And, trying out Achernar’s solution, I can get no discernible results (margin-bottom doesn’t seem to change anything…).

My advice:

  1. First, ditch your class numbering scheme, like Achernar said. Why not go with names like “header” and “bodytext” etc.?

  2. if you want the line of text after the header to follow up flush (same spacing), resort to using line breaks. This is what I did on my page:

So you could try writing it like:

I would definitely ditch the p.10 and p.14 idea. If the one is a header, why not call it a header (<h1>)? That way, even in a browser that doesn’t support stylesheets, the thing will look like a header. That, after all, is the whole point of html…

I’m not a CSS expert but I’ve used it alot. Does <p class=p.whatever> work the same as <p class=whatever>? One of the sample sheets I ganked from someone else’s site used a style called td.header and when it was used, it was used like <td class=header>.

May be irrelevent though but it’s something I noticed in your convention.

Thanks to everyone for your very informative replies. I appreciate it greatly.

Long live the Straight Dope Message Board!

Hmmm… I wonder what I did wrong. What user agent are you using? I’ll try to see if I can get it to work right.

I definitely agree that p.14 should be changed to something like h1, if only for the sake of accessibility, but in the end, it’s not crucial to get it looking how you want.

Maybe you can try a negative line height.

Tried that, too. no go.