Welcome to WebmasterWorld Guest from 50.19.156.19

Forum Moderators: not2easy

Message Too Old, No Replies

No carriage return under H1/H2 tag

is it possible?

     

chrisandsarah

5:07 pm on May 10, 2003 (gmt 0)

10+ Year Member



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

5:11 pm on May 10, 2003 (gmt 0)

10+ Year Member



you'll find it the margin attribute, try:

h1 h2 {
margin: 0px;
}

asp

pageoneresults

5:21 pm on May 10, 2003 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:21 pm on May 10, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:30 pm on May 10, 2003 (gmt 0)

10+ Year Member



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

5:54 pm on May 10, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

6:09 pm on May 10, 2003 (gmt 0)

10+ Year Member



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

6:09 pm on May 10, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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>