[sjfan]

Originally Posted by dwig

Perhaps when dealing with a "problem" like this:

CSS:
h1 {margin-top: 2em; margin-bottom: 2em; text-align: center;}

Text:
<h1>LOVE AMOUNG<br/>the<br/>CHICKENS</h1>
<h1>by P. G. Wodehouse</h1>

You can't just put in 3 H1 tags for the title. You have to do something more complex like:

CSS:
h1 {margin-top: 2em; margin-bottom: 2em; text-align: center;}
h1.firstline {margin-top: 2em; margin-bottom: 0em; text-align: center;}
h1.middleline {margin-top: 0em; margin-bottom: 0em; text-align: center;}
h1.bottomline {margin-top: 0em; margin-bottom: 2em; text-align: center;}

Text:
Text:
<h1 class="firstline">LOVE AMOUNG</h1>
<h1 class="middleline">the</h1>
<h1 class="bottomline">CHICKENS</h1>
<h1>by P. G. Wodehouse</h1>

“Love Among the Chickens” to me sounds like it’s one headline with multi-line formatting, notionally. So I’d keep it in one h1 tag and divide it up inside that:

I’d probably put the byline in a separate p/div with class="byline"; it’s not a sub-heading to my mind and thus wouldn’t use an h1 (or h2) tag. You can put whatever formatting you want on the byline class.

Something like:

.title {
    text-align: center;
    font-size: larger;
}
.byline {
    text-align: center;
    font-size: large;
    font-style: italic;
}
....
<h1 class="title">
<div>Love Among</div>
<div>the</div>
<div>Chickens</div>
</h1>

<div class="byline">by P. G. Wodehouse</div>

EDIT: Obviously you can put first/second/third-line classes on the divs if they need different formatting. Conceptually, though, I want my “h1” tag to contain the text that would correspond to a full table of contents entry at the location (“Love Among the Chickens”) in one h1 tag.

It's possible that the byline div should go inside the h1 tag if I want a TOC entry of “Love Among the Chickens by P. G. Wodehouse”. That’s more likely in something like an anthology of short stories by different authors.