homepage Welcome to WebmasterWorld Guest from 23.22.97.26
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
No carriage return under H1/H2 tag
is it possible?
chrisandsarah




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

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




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

you'll find it the margin attribute, try:

h1 h2 {
margin: 0px;
}

asp

pageoneresults




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

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




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

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




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

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




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

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




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

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




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

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>

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