長いタイトルになって改行された時に文字が重なってしまう問題への対処法

FC2のテンプレートを使ってるんですが、ブログ記事表示の際の
タイトルの表示は「ブログの記事タイトル：ブログ名」の表示にしてます。

他にも文字サイズやら色々とCSSを修正してるんですが、
ふと気づくと、ブログの記事タイトルが長くなって改行された際に、
文字が重なってしまっていました；；



というわけで、対処を実施したので覚書として。

とりあえず、タイトル部分のHTMLとCSSを確認

このケースで良くあるのが、「text-indent」を設定していたので、
「padding」に設定しなおしましょ、ってケース・・・なんですが、
そういうわけではなさそう。

HTML

<div id="banner">
<h1><a href="http://babyp.blog55.fc2.com/">
iPhoneのFacebookアプリで何人かの友達のプロフィール写真が入れ替わって表示される：なんとなしの日記
</a></h1>
<h2>日記＆覚書感覚で継続中･･･（＾＾）</h2>
</div>

CSS

h1{
padding : 10px 0 0 20px;
color:#555555;
width:900px;
height:50px;
font-weight:normal;
font-size: 24px;
}
h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
padding : 0px 0px 0px 20px;
}

まずは、aタグのpaddingがダメだね。

aタグでpaddingをすると、text-indentみたいな動作になってしまうみたいですね。
改行が行われた後の開始場所がh1タグ内の頭から始まってしまうみたいです。

というわけで、aタグ内のpadding部分を修正。

h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
padding : 0px 0px 0px 0px;
}

ま、全部0なら消しちゃえよ、って話はありますが、
とりあえず、わかりやすいように書きました。

で、結果がこれ。

とりあえず、変なインデントはなくなりました。
が、まだ文字は微妙に重なってる。

文字が重なる時は、line-heightで調整する

h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
line-height:1.4em;
padding : 0px 0px 0px 0px;
}

line-heightである程度高さを調整することで、
改行が行われても、正しく表示されるようになりました。
その他も少し微調整しつつ、気持ち良いタイトルに修正出来ました。


結果、不満のないタイトル表示にはなったんですが、少し疑問点も。

CSSのbodyタグに「line-height:1.4em;」は設定してあるんですよね。
なんでここの設定が効かないんやろう。。。