Headline Breaks and CSS

[stacy83]

I know that when you use a headline tag it automatically inserts a space above and below that headline. Is there anyway to stop those breaks that the headline tag inserts?

I threw together this example, and you'll see what looks like hard returns between the headline tags when really there are no breaks or paragraph tags.

I'd like the 2 headlines to butt up against each other, and I need to figure out how to do it using CSS if possible.

Any suggestions?

[edited by: SuzyUK at 9:00 pm (utc) on Jan. 31, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

Hi stacy83 and Welcome to WebmasterWorld!

the breaks above and below <hn> elements are default margins (set by the browsers) you can control the amount of space or remove them altogether by using something like the following in your CSS

h1 {margin: 0;} /* removes all margins */
or
h1 {margin: 2px 3px 4px 5px;} /* set all four to your liking */

the second example shows how to set all four margins and is always read in this order:
Top, Right, Bottom, Left - or TRouBLe :)

Suzy

[edited by: SuzyUK at 9:07 pm (utc) on Jan. 31, 2007]

[Fotiman]

I think what you mean is that you want the headline to appear 'inline'? For example, if your markup looked like this:

<h1>My Super Site!</h1>
<h2>Some Snazzy Tagline!</h2>

When rendered, this appears like this:

My Super Site!
Some Snazzy Tagline!

But you want it to appear like this:

My Super Site! Some Snazzy Tagline!

The property you want to modify is the 'display' property. For example:

<style type="text/css">
h1,
h2
{
display: inline;
}
</style>

Hope that helps.