Welcome to WebmasterWorld Guest from 54.158.240.147

Forum Moderators: not2easy

Message Too Old, No Replies

How do I reduce line spacing?

And space under headings?

     
7:04 am on Aug 31, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 18, 2006
posts:45
votes: 0


My webpage relies heavily on CSS.
The lines are too far apart. The spaces under the titles are too wide. How can I reduce line spacing in the CSS?

Thanks.

9:52 am on Aug 31, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2159
votes: 8


You can specify the margins and/or padding on all sides of an element, example h1{margin:10px 0 5px 0; padding: 2px} or specify line height, i.e. p {font-size: .85em; line-height: 1em}. Play with the line heights to achieve the desired affect. You can also do word spacing: p { word-spacing: 10px; } and letter spacing: p { letter-spacing: 3px; } as additional options.

Marshall

4:17 pm on Aug 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


I assume you are displaying an in-line style Hx header in a larger font than the remainder of the text. If so somewhere there has to be a <br> or a <p> to force a new line. Then most browsers will drop to a new line based on the previous font-height which can give a lot of space under the header.

If you put the header in a separate div the browser will only drop down to the next available pixel.

(<div><h1>blah blah</hi></div>text blah blah blah...

Crude, but it works.

2:29 am on Sept 1, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 18, 2006
posts:45
votes: 0


Thanks guys. I think Marshall's solution is closest to what suits me. Thanks again.