Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and line-height between paragraphs

Using breaks for smaller space between para, how to do in CSS?



7:17 pm on Mar 8, 2002 (gmt 0)

10+ Year Member

Approximately forever now, I've used <br>, instead of <p> for less line height between paragraphs of text (usually text in table cells).

I usually get even less height by changing the font of the break, like: <font size="1"><br></font>.

But I can't find a similar method in CSS. Both the line-height and creating a new font class get applied to all the text, not just the line between paras, since all the text is one block.

And "br" itself doesn't seem to respond to a CSS definition.

This seems like a trivial problem. What am I missing here?


7:51 pm on Mar 8, 2002 (gmt 0)

10+ Year Member

One way to do what you want is to create a class in your style-sheet with the line-height you want, e.g.:

.space {
line-height: .3 em;

Then, rather than including your text in paragraph tags, break it thus:

<br><p class="space"></p>.


8:05 pm on Mar 8, 2002 (gmt 0)

10+ Year Member

Note that you can apply the line-height style to other tags as well -- like <div>, <h6>and <br>, some of which could save you some coding.

For instance, in your stylesheet, use:

h6 {
line-height: .3 em;

Then,in the body:



8:24 pm on Mar 8, 2002 (gmt 0)

10+ Year Member

What your asking about is paragraph margins rather than line-height. You can try:

p { margin-top: 0.5em; }

or to be even more precise:

p + p { margin-top: 0.5em; }

The first one sets the top margin of all paragraphs to 1/2 space (more or less). The second one does that for only paragraphs that follow other paragraphs (i.e., it doesn't set the margin of the first paragraph on the page, or the first paragraph in a section).


9:18 pm on Mar 8, 2002 (gmt 0)

10+ Year Member

Thanks guyz!

Just what I needed! And "paragraph margins"? Fantastic. Wish one of my 3 CSS books indexed on "paragraph margins".

They all discuss margins of various "elements", but some of us require a whack to the side of the head, like "Oh, paragraphs must be included in those 'elements'".

Hope CSS margins are well supported!


10:44 pm on Mar 8, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I usually have several defined margins available to control spacing of elements.

You will definaltely find varying support, and once again, Opera is key to creating a workable set of margin style definitions due to the fact that Opera has strict adherence to WC3 element definitions.

I use margins for controlling space before and heading, paragraphs, divs and lists, all depending on the layout of course.

I also use margins to control lists that I have placed in floating divs since Opera adds right margin spacing, where IE and Netscape do not. Without setting ol,ul {margin-right:0px} the default right margin recognized by Opera squeezes the list content to a narrower presentation than the other (erroneous) browsers. In some of my applications, uniformity here is desired so the surrounding page elements will flow as intended.

There is a lot of room for control, trial & error plus a bit of creativity will help you create styles that serve your needs.


Featured Threads

Hot Threads This Week

Hot Threads This Month