homepage Welcome to WebmasterWorld Guest from 54.167.179.48
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

    
Remove white space under heading
how is it done?
Webbies

5+ Year Member



 
Msg#: 8507 posted 4:58 pm on Feb 18, 2006 (gmt 0)

I want to have

Some heading
some text blah blahbla

and not

Some heading

some text blah blahbla

how do I get rid of the white space?

also, is it possible to get rid of the line break so the heading is displayed like this:

Some heading: some text blah blahbla

 

p_antoni

10+ Year Member



 
Msg#: 8507 posted 5:08 pm on Feb 18, 2006 (gmt 0)

to remove the white space just add "margin: 0px" to your CSS style for the heading

you can remove the line break by adding "display: inline"

Hope this helps

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8507 posted 5:12 pm on Feb 18, 2006 (gmt 0)

Welcome to WebmasterWorld!

Adjusting the margins in CSS. You'd want to do something like:

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

<p> elements in strict mode (at least in Firefox) have margins on the top as well so you'll want to remove them.

To answer your secoding question, the ideal solution would be:

h1 { display: run-in; }

This should make the <h1> element (according to the specs [w3.org]) become the first inline element of the following <p>. Unfortunately full support is limited to Opera, and limited support to Safari and IE5/mac. You might be able to simulate the effect by making both the <h1> and the following <p> inline but I'm not sure how well that'd work.

willybfriendly

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8507 posted 5:42 pm on Feb 18, 2006 (gmt 0)

display: run-in; lacks sufficient suppport to be reliable.

For run-in headings I generally use...

<h1 style="display: inline; margin-right: .5em;">Some text</h1><p style="display:inline">some more text...</p>

which works in IE, Moz, Opera etc.

WBF

Webbies

5+ Year Member



 
Msg#: 8507 posted 6:29 pm on Feb 18, 2006 (gmt 0)

Thankyou very much for your quick answers!

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