Any way to stop the H1 tag forcing blank line

Forum Moderators: open

Message Too Old, No Replies

Any way to stop the H1 tag forcing blank line

ThomasAJ

6:33 am on Oct 17, 2005 (gmt 0)

I want to use the H1 tag because it seems to be important for SEO but I do not want the blank line (or large gap you could call it) from appearing after the tag and before the next "ordinary line".

Robin_reala

6:36 am on Oct 17, 2005 (gmt 0)

This calls for CSS:

h1 { margin-bottom: 0; }

ThomasAJ

7:13 am on Oct 17, 2005 (gmt 0)

Thank you

cws3di

7:32 am on Oct 17, 2005 (gmt 0)

Hola Thomas

You can't just insert Robin's code into the <h1> tag. You need to insert a style sheet in between the <head></head> tags of your page, for example:

<style>
<!--

h1 { font-family: Times New Roman; color: #000066; font-size: 36px; font-weight: normal; line-height: 40px; margin-top: 0px; margin-bottom: 0px; }

//-->
</style>

killroy

9:23 am on Oct 17, 2005 (gmt 0)

Or use an inline style:

<h1 style="margin-bottom:0">Title</h1>

g1smd

7:39 pm on Oct 17, 2005 (gmt 0)

Your bare <style> tag needs to be declared as:

<style type="text/javascript"> ... </style>

but you are much better off if you put all of the style information in an external stylesheet:

JAB Creations

11:41 pm on Oct 17, 2005 (gmt 0)

Headers (h1, h2, h3, etc) are block level elements. This means that they will be displayed on their own lines.

Look at a newspaper and tell me "World War II WON!" belongs on the same lines of the fine details, it's not.

If you are creative enough to bend laws not ment to really be broken you can use CSS to get around the break lines after headers.

h1 {
display: inline;
}

Be aware that even I have come to conform and embrace headers as block level elements. :)

ThomasAJ

12:27 am on Oct 18, 2005 (gmt 0)

Thanks again all.

I was wondering why

h1 { yadda }

was not working!

tedster

12:37 am on Oct 18, 2005 (gmt 0)

<style type="text/javascript"> ... </style>

Just a note -- I assume that was an error and should have been this:

muneepenee

1:58 pm on Oct 18, 2005 (gmt 0)

1. In firefox yu kan yuze negativ marjin...
margin-top:-7px;margin-bottom:-15px}
tu get rid av sum av that emptee blank nuthang tween reel stuff
2. dont werk in IE, but dont need it...IE dont add neer as much emptee blank nuthang

tedster

4:48 pm on Oct 18, 2005 (gmt 0)

The key here is in understanding the way a browser's rendering engine collapses neighboring margins.

You can set margin-bottom to zero on one element (an H element in this case) but if the following element has a margin-top, then that margin-top amount will still render. The W3C margin collapsing rules say that when two element both have a margin, the browser should render greater one of the two but not the sum of the two.

So if you want a consitent look cross-browser, you can also set the margin of the neighboring element to zero or to something small. I like to use 4px.

Two or more adjoining vertical margins of block boxes in the normal flow collapse.
The resulting margin width is the maximum of the adjoining margin widths.
In the case of negative margins, the maximum of the absolute values of the negative
adjoining margins is deducted from the maximum of the positive adjoining margins. If
there are no positive margins, the absolute maximum of the negative adjoining margins
is deducted from zero.
W3C reference:
[w3.org...]

g1smd

7:00 pm on Oct 18, 2005 (gmt 0)

D'oh. Yes. Simple Typo. It should be:

<style type="text/css">

Bonus Points if you can you find the other typo I made this year...