homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS and line-height between paragraphs
Using breaks for smaller space between para, how to do in CSS?

10+ Year Member

Msg#: 100 posted 7:17 pm on Mar 8, 2002 (gmt 0)

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?



10+ Year Member

Msg#: 100 posted 7:51 pm on Mar 8, 2002 (gmt 0)

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>.


10+ Year Member

Msg#: 100 posted 8:05 pm on Mar 8, 2002 (gmt 0)

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:



10+ Year Member

Msg#: 100 posted 8:24 pm on Mar 8, 2002 (gmt 0)

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).


10+ Year Member

Msg#: 100 posted 9:18 pm on Mar 8, 2002 (gmt 0)

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!


WebmasterWorld Senior Member 10+ Year Member

Msg#: 100 posted 10:44 pm on Mar 8, 2002 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved