How can I use <H> tags without a a line break being added after it. Does anyone know a way to get around that blank line that is added under the words that are contained in the heading tags?
| SitePoint Sponsor |
How can I use <H> tags without a a line break being added after it. Does anyone know a way to get around that blank line that is added under the words that are contained in the heading tags?
Hi,Originally Posted by 321web
Heading tags are block level elements by default and puts a space before and after, much like the p tag, another block level element. You can change the display property with css to inline and this will get rid of the space around it.
-xDevCode:<h1 style="display: inline;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
I think you can use css, perhaps an alternative would be defining a line height. You could also make your margins and padding 0, but there are times when you might not want that.
I had a similar problem with the way IE rendered my < h1 > tags.Code:hX {line-height: 1; }
Alone we can do so little; together we can do so much.
-----------------------------------------------------
tinyplanet.org <--a nifty spot.
Margins and padding set at 0 won't work and neither will line-height: 0. Reason? Heading tags are block level elements. By default, they are set as if you had this style - display: block;
The 3 tests above is an example of what I'm talking about. There is hack that you can use though. That's to set the top and bottom margins to minus something.Code:<h1 style="display: inline;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg <h1 style="margin: 0px; padding: 0px;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg <h1 style="line-height: 0px;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
Link:
http://www.w3.org/TR/REC-html40/stru...l.html#h-7.5.3
-xDev
I didn't set the line height to "0" I set it to 1.
Alone we can do so little; together we can do so much.
-----------------------------------------------------
tinyplanet.org <--a nifty spot.
No offence but setting it to 1 won't work just as surely as setting it to 0 won't work. What he was looking for was a way to get rid of the whitespace or newline that divides an H tag from it's parent or child elements. As long as the display property remains block, you have no way around this behaviour without resorting to a -1,2,3,4 margin hack. Set it to display as inline and voila, you have no more line-break.
-xDev
you are missing my point.
I pointed out an alternative because it's not always appropriate to change block level elements into inline elements. You may still want to retain certain other characteristics of the block level element.
Alone we can do so little; together we can do so much.
-----------------------------------------------------
tinyplanet.org <--a nifty spot.
firegryphon3207,
Point well taken. It is desirable in most situations to keep the ability to apply padding and width on a block element. I played around with line-height and margin-bottom to get this result:
-xDevCode:<h1 style="line-height:0.4em; margin-bottom: -0.4em;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
The good thing is now he knows how to do the same to whatever element is underneath it to keep it close to the <h> element.Assuming they aren't nested or something.
Alone we can do so little; together we can do so much.
-----------------------------------------------------
tinyplanet.org <--a nifty spot.
Thanks for the help. Now how much will H tags really help my search engine rankings?
With google? Probably not a major effect.
Alone we can do so little; together we can do so much.
-----------------------------------------------------
tinyplanet.org <--a nifty spot.
Posting Permissions
Bookmarks