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

CSS Forum

How do I reduce line spacing?
And space under headings?

 7:04 am on Aug 31, 2007 (gmt 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?




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

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.



 4:17 pm on Aug 31, 2007 (gmt 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 Sep 1, 2007 (gmt 0)

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

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