HTML style sheet: question!

[Kansas_Man]

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”>
<!–

p.10{font-size:10px}
p.10{line-height:13px}
p.10{font-family:Verdana;}
p.10{color:#625B55;}

p.14{font-size:14px}
p.14{line-height:17px}
p.14{font-family:Verdana;}
p.14{color:#625B55;}
–>
**
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?

[Crusoe]

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

[Crusoe]

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

[Achernar]

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.

[Achernar]

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

](http://www.w3.org/TR/REC-CSS2/syndata.html#keywords)In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit.

[toadspittle]

REFERENCES:

http://www.w3.org/TR/REC-CSS1#line-height

http://www.w3.org/TR/REC-CSS1#the-height-of-lines
from the latter:

4.4 __ The height of lines

All elements have a ‘line-height’ property that, in principle, gives the total height of a line of text. Space is added above and below the text of the line to arrive at that line height. For example, if the text is 12pt high and ‘line-height’ is set to ‘14pt’, an extra space of 2pt is added, namely 1pt above and 1pt below the line. Empty elements influence these calculations just like elements with content.

The difference between the font size and the ‘line-height’ is called the leading. Half the leading is called the half-leading. After formatting, each line will form a rectangular line-box.

If a line of text contains sections with different ‘line-height’ values (because there are inline elements on the line), then each of those sections has its own half-leading above and below. The height of the line-box is from the top of the highest section to the bottom of the lowest one. Note that the top and bottom do not necessarily correspond to the tallest element, since elements can be positioned vertically with the ‘vertical-align’ property. To form a paragraph, each line-box is stacked immediately below the previous line.

Note that any padding, border or margin above and below non-replaced inline elements does not influence the height of the line. In other words: if the ‘line-height’ is too small for the chosen padding or border, it will overlap with text on other lines.

Replaced elements (e.g. images) on the line can make the line-box bigger, if the top of the replaced element (i.e., including all of its padding, border and margin) is above the tallest text section, or if the bottom is below the lowest.

In the normal case, when there is only one value of ‘line-height’ throughout a paragraph, and no tall images, the definition above will ensure that baselines of successive lines are exactly ‘line-height’ apart. This is important when columns of text in different fonts have to be aligned, for example in a table.

Note that this doesn’t preclude the text on two adjacent lines from overlapping each other. The ‘line-height’ may be smaller than the height of the text, in which case the leading will be negative. This is useful if you know that the text will contain no descenders (e.g., because it only contains uppercase), so the lines can be put closer together.

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.

[toadspittle]

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:

http://www.hotknifedesign.com

So you could try writing it like:

<p><font class=“header”>This is the Header</font><br />

<font class=“bodytext”>And here’s the body right below it, without space.</font></p>

[viking]

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…

[ZipperJJ]

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.

[Kansas_Man]

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

Long live the Straight Dope Message Board!

[Achernar]

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

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.

[Urban_Ranger]

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

Maybe you can try a negative line height.

[toadspittle]

Maybe you can try a negative line height.

Tried that, too. no go.