No carriage return under H1/H2 tag

is it possible?

[chrisandsarah]

Hi
Is it possible to have H1 or H2 tags that dont leave a carriage return underneath? Or is there an alternative way.

I have a limited space to put text in at the top of a page, and want to use H2 text for optimization purposes.

thanks for any help

[aspr1n]

you'll find it the margin attribute, try:

h1 h2 {
margin: 0px;
}

asp

[pageoneresults]

You can also create a special p class that comes right after the h tag...

p.top{
margin-top:0px;
}

<h1>Heading</h1>
<p class="top">Paragraph that is flush bottom with the h tag.</p>

Picked that one up from tedster. ;)

[DrDoc]

aspr1n is right... However, there should be a comma between h1 and h2:

h1, h2 {
margin: 0px;
}

Without the comma the rule would affect all h1 tags, but only h2 tags that reside inside a h1 (which is invalid syntax ;))

[aspr1n]

he he sorry - more haste less speed ;)

re: pageoneresults suggestion, it would probably be syntactically more correct to:

p:first-child element{
margin-top: 0px;
}

think that would work, then there's no need for a class.

asp

[tedster]

Just to pull it all together a bit - the space under an H tag is the result of two margins: the margin-bottom of the H tag and the margin-top of the next element.

Margin collapsing rules for the box model come into play in this situation, as they do with most vertically stacked elements. The margins of two stacked elements are not added together by the browser. Instead only the larger of the two margins is rendered.

So if your H tag has a 0px margin-bottom and the following p tag has a margin-top of 4px, you get a neat little 4px space between the two elements.

I often have a couple of classes defined in the .css file to make margins behave more "compactly". For instance, I'll give the default H1, H2 tag a margin-top and margin-bottom of 0px, and leave the spacing to the preceding or following elements. This approach can also help list items and lists to render neatly cross-browser.

Vertical margins may collapse between certain boxes:

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 absolute maximum 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.

Vertical margins between a floated box and any other box do not collapse.

Margins of absolutely and relatively positioned boxes do not collapse.

W3C Box Model Reference [w3.org]

[aspr1n]

Vertical margins between a floated box and any other box do not collapse.

Tedster that is interesting - could you checkout my post in: [webmasterworld.com ], as I wonder if Geko is incorrectly collapsing margins in this case?

Cheers,

asp

[edited by: aspr1n at 6:18 pm (utc) on May 10, 2003]

[tedster]

I just took a second look at the title of the thread, and notice that chrisandsarah mentioned a carriage return. Although it seems clear that the question is about the space between elements, the automatic "return" to a new line can also be eliminated.

There isn't "really" a carriage return there. The effect is generated because an H tag is rendered as a block level tag, by default.

To change this, we can use a display:inline; rule for the H tag. That rule results in what printers call a run-on head, where the body copy just follows along in the same line of text.

A run-on head can be a nice effect in certain less formal situations. It allows us to indicate the document's structure in the HTML code without generating the visual rigidity of a standard "outline" format.

<Note to aspr1n - every browser I test does something different with that layout. They can't all be right, but I'd suggest avoiding that approach>