Controlling H1 tag with style sheets

Impact on page design

[fom2001uk]

I've recommended that a client uses some H1 tags on a few pages (for optimisation purposes). I've told them they can control the font size with style sheets.

They've now said that doing that will create extra "white space" between the headline and the text. They're unhappy with this because they say they'll have to do this on every single page, so they look the same.

I'm no designer, but is this really a problem, and is there a solution?

[Nick_W]

Actually it's very easy.
Here you go:

Avoiding "white space" usnder H tags [webmasterworld.com]

Nick

[dingman]

Another method I find stylisticly useful at times is to dimply over-ride the default of h1 elements being block-level items at all. I didn't find it in the thread Nick mentioned, but h1 { display: inline; } works wonders for me. It's not always the right thing - if you find yourself doing something like </h1><br /> you didn't really want that change - but sometimes it's just the thing to propperly mark your headers and still have the text join the flow of a paragraph. I think of them sort of like illuminated capitals in old books.

[pageoneresults]

I didn't find it in the thread Nick mentioned, but h1 { display: inline; } works wonders for me.

Have you noticed that when you do this, if you had a text-align center attribute, the display:inline; somehow overrides that and left justifies the <h1>. Anyone else seen this?

[dingman]

Can't say as I have. Every place I've used it, the text is supposed to be left-justified anyway. Does it still happen if you set the justification for the h1 to center as well? After all, it really shouldn't be inside the paragraph. If I recall correctly, the w3c validator will complain that you have a block-level entity inside an inline-level entity, which isn't allowed. (You may have styled it as inline, but that doesn't count.)

I'm thinking that if the h1 is left-justified because that's the default, and you have it flowing into the text of the following paragraph, it might just force that following paragraph to be left-justified as well. It's just a theory, though. I'll fiddle with it while I wait for my boss to give me something better to do.

[dingman]

OK, tested a few combinations, and here's what I found. Same results in IE6 and Mozilla 1.2.1. Haven't tried all the combinations in Opera, but what works in both IE and Moz also works in O6 and 07.

If you use a <p> following or enclosing the <h1>, then the <h1> will be on a line by itself, and left-justified even if the <h1> is supposed to be centered. If, however, you place both the <h1> and the associated text within a <div> together and don't use another container for the text, you can have a page that both validates and has centered text with the headers running into the main text.

This is probably not correct content-based markup for large blocks of text, since <div>s are a more generic container than a <p>, and therefore should probably not propperly be used in their place. Sometimes text isn't really a paragraph, though, in which case I don't see a problem with leaving off the <p>. And the validator is going to have a hard time catching you if you use <div> instead of <p> where you should really use <p>

Personally, I think this means I need to double check that my content-based markup is OK where I'm using inline headers. I know two places I have it, it is. Not sure about the rest without looking.