?
Solved

Paragraph Spacing with CSS

Posted on 2003-03-08
12
Medium Priority
?
1,128 Views
Last Modified: 2008-02-01
How do you force the spacing between a paragraph to not be double spaced.    Starting each line with a <p> tag creates double spacing.  

I.E

Bellows Planning Group
Attn Mark Matejcek
9340 E Redfield RD.
Suite 2113
Scottsdale, AZ 85260

The text above is in a cell in a table I want to be able to force each line to start on the next line
and retain single spacing.  

Thanks

0
Comment
Question by:sparky145
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +4
12 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 8096577
The white-space attribute is what you are looking for, try adding this in your code.

<td style='white-space:pre;'>

  l   e   x   x   w   e   r   n
0
 
LVL 17

Expert Comment

by:dorward
ID: 8096986
Paragraphs have a margin (by default in most browsers).

<p style="margin-top: 0; margin-bottom: 0;">The quick brown fox...</p>

As usual an external style sheet is preferred.

p {
  margin-top: 0;
  margin-bottom: 0;
}

HOWEVER, the content you suggested does not appear to be a series of paragraphs.

<address>
Bellows Planning Group<br>
Attn Mark Matejcek<br>
9340 E Redfield RD.<br>
Suite 2113<br>
Scottsdale, AZ 85260<br>
</address>
0
 
LVL 10

Expert Comment

by:dij8
ID: 8097308
Paragraphs are designed to be separated by an additional line.  Much the same as you will see in most mediums of writing.  As dorward has shown, what you are really after is <br>.  this is just a way of forcing the text to the beginning of a new line.

http://www.blooberry.com/indexdot/html/tagpages/p/p.htm
http://www.blooberry.com/indexdot/html/tagpages/b/break.htm
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 720 total points
ID: 8097797
Don't use the p tag. Use a span, which is an inline element and at the end of each "paragraph' use a br tag with a second styled br for precise positioning:

<span>
   some text<br /> <br style="line-height:40%" />
   more text etc<br /> <br style="line-height:40%" />
</span>


Of course you could declare a class for the br or multiple class for each of the line heights you want.  The pecentage is derived from the height of the text line of the span so a chagne in font size keeps the proportions the same.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 8100169
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8111343
for COBOLdinosaur

you say, use
<span>
  some text<br /> <br style="line-height:40%" />
  more text etc<br /> <br style="line-height:40%" />
</span>

interesting, but why not use
<div style="padding-bottom:xx">
  some text</div>

am I missing something here?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8113348
Are you missing something?  Yes.  The div behaviour includes a line feed following it.  The padding is inside the rendering box so the net result is the line feed at normal height plus the value of the padding.  This will work for a specific resolution and font size, but to be flexible a percentage is better and that is where padding runs into trouble.  It is a pecentage of the rendering box width whereas the line-height is a percentage of the font size.  So a change in resolution, font-size or screen size maintains the correct proportions/relationship with line height but may not with padding.

Cd&
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8119797
for CobolDinosaur

I am fairly new at EE

have you got time to chat about this as there are couple of questions I would like to ask...

where should I do it? do I need to post a question to you?

I do not want to bug anybody else :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8122626
Hex,

I have email addresses in my profile if you have something to discuss offline.  If it is a straight tech Q that should be on the site, I 'll let you know, but if you send me email, I'll respond.

Cd&
0
 
LVL 2

Expert Comment

by:TenTonJim
ID: 8256084
I would suggest dorward's:
<p style="margin-top: 0; margin-bottom: 0;">The quick brown fox...</p> (and yes use a linked style sheet if possible)

to start the whole thing off and then just use a regular <br> or <br /> (depending on your doctype).

p renders a double space by default... using the <br> will give you just a new line feed no spacing.

This using your example:
<p>Bellows Planning Group<br />
Attn Mark Matejcek<br />
9340 E Redfield RD.<br />
Suite 2113<br />
Scottsdale, AZ 85260</p>

Thank you,
JimS.
0
 
LVL 18

Expert Comment

by:bruno
ID: 8409910
just another Q where Jim posts, and user abandons...what else is new.

:-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8500440
Glad we could help. Thanks for the A. :^)

Cd&
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month8 days, 6 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question