Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Paragraph Spacing with CSS

Posted on 2003-03-08
12
Medium Priority
?
1,138 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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month11 days, 17 hours left to enroll

564 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