【CSS】CSSでh1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、うまくいきません

質問

【質問】CSSでH1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、上下に余計な空白ができてしまい困っています。

【狙い】高さ32pxの3枚の画像ABCを縦につなぎ合わせた、高さ96pxの一枚の画像(=***)をCSSでH1の背景にし、H1の内容に応じてHTML上でclassを変えて、背景をAにしたりBにしたり変えられるようにする。
【コード】
CSS
h1 {height: 32px;background-image: url(***);}
.a h1{background-position: 0 0;}
.b h1{background-position: 0 -32px;}
.c h1{background-position: 0 -64px;}
.a,.b,.c{margin: 0;padding: 0;}
/*-↓画像のタテの中心に文字を並べるためにpaddingをとります-*/
h1 .subject{padding-top:9px;margin: 0;}

HTML
<div class="b"> <!--←A,B,Cに画像を切り替えます。//-->
<h1><div class="subject">助けてください（ T＿T）</div></h1>
</div>

【現状】
IE7 H1の下に余計な空白ができてしまいます。
FireFox3　H1の上下に余計な空白ができてしまいます。

どうすればよいのでしょうか？どこを修正すればよいのでしょうか、また
代替案があれば教えてくださるとありがたいです。

回答No.1

noname#83877 · ベストアンサー

h1の中にdivは入りません。

margin:0; padding:0; はdivではデフォルトの値になっていたはずです。h1に指定してみてください。

お礼

ありがとうございます。
h1はインライン要素だったんですね
しかし、
h1{padding-top:6px;height:32px;}を追加して
<div class="b"> <!--←A,B,Cに画像を切り替えます。//-->
<h1>助けてください（ T＿T）</h1>
</div>
とすると
FireFoxとIEで解釈がずれてしまいます

IEではpaddingがheightに含まれますが、
FireFoxではpaddingがheightに含まれないので、下に6pxはみ出て38pxになってしまいます。

どうすればよいのでしょうか。打開策を教えてくださると助かります。

補足

下の返事の補足です。
H1はブロック要素の特殊な形で、中にブロック要素は含めないタイプなんですね。失礼しました。

とりあえずの妥協策として、画像を12px長くして、あらかじめ画像の間に6pxのスペースを入れることで、一応FireFoxでもIEに近い形で表示させました。
結局FireFoxで6px長く表示されてしまうため、根本的な解決にはなってません。
どうすればよいのでしょうか・・・。