「margin:1.3em 0;」が原因？

　私が利用している「エコ」スキンをMacOS9.2.2+IE5.1.7で閲覧するとバナー（banner要素）とその下（content要素）の間に隙間が生じてしまう現象があった。各要素を色分けして調べると、banner要素が下に伸びているわけではなくcontent要素が上に伸びているわけでもなく、「インターネット上の他人の意見を読んで思ったこと」と書いてあるlead要素が下に伸びているわけでもない。lead要素に指定している<p></p>を<div></div>に変えると隙間が消えるが、lead要素が上に移動してしまい良くない。「style.css」を見ると「#lead { padding:0 14px; }」だからlead要素の上下のスペースは「0px」のはず。<p></p>で囲むと上下にスペースができるからタイトルとのスペースは<p></p>で囲んでいるせいであろうと考えた。しかし、lead要素の下（content要素まで）はタイトルまでのスペースと比べて広すぎないか、ということで原因が分からず悩んでいた。
　そこで仕方なく次のスタイルを指定しておいた。

/* バナーとコンテンツの隙間を無くす */
#banner { overflow:hidden; }
#header { overflow:hidden; }

　「#banner { overflow:hidden; }」だけで十分だが、閲覧時の文字を拡大した時にheader要素がbanner要素を押し下げてバナーの画像とcontent要素の間に隙間が生じてしまうのを防ぐために「#header { overflow:hidden; }」を加えておいた。
　しかし、どうしても納得できない。banner要素が下に伸びていないのにcontent要素との間に隙間が生じてしまうのは何故か。しつこく原因を探った。
　ふと<p>の上下のスペースはどのように指定しているのだろうかと疑問に思って、スタイルシートを調べてみた。個別に指定しているところもあるが、「blog_base.css」で全体に指定しているかもしれないと思って確認すると、次の指定が気になった。

* html p {
margin:1.3em 0;
}

　なぜ「em」？
　「em」はブラウザによって解釈が違うらしい。フォントサイズの指定では「%」を使った方が良いらしいが、<p>の指定では問題がないような気がする。また、lead要素の上も「1.3em」だから下も同じはずで問題ないような気がする。でも試しに次のように指定して見た。

/* バナーとコンテンツの隙間を無くす */
#lead { margin:1.3em 0 auto 0;}

　下のマージンだけ「auto」にした。lead要素の位置がずれることなくbanner要素とcontent要素との隙間が消えた。次のように指定しても良い。

/* バナーとコンテンツの隙間を無くす */
#banner p { margin:1.3em 0 auto 0;}

　これはブラウザのバグなのかもしれない。Netscape7.02では、こんな指定がなくても隙間は生じない。
　この改善方法に関しては文字サイズを変更してもスキンのスタイルが崩れないようにするために以前と同じ次のスタイルを指定しておいた方が良いかもしれず、私のブログでは変えないことにした。

/* バナーとコンテンツの隙間を無くす */
#banner { overflow:hidden; }
#header { overflow:hidden; }

　ついでにIE5.1.7のバグかもしれない現象をもう一つ書いておく。
　content要素の頭に次のように文字を入れた時のこと。

<!-- Content -->
<div id="content">
ああ
<!-- Side-A -->
<div id="side-a">

　「ああ」という文字がside-a要素の右、main要素の上に来た。Netscape7.02ではside-a要素の上に来る。Netscape7.02の方が正しいような気がする。「ああ」を「ああ<BR style="clear:both;">」とするとside-a要素の上に来る。side-a要素の「float」が効いているのかと思ったが、「ああ<BR style="clear:right;">」だけでなく「ああ<BR style="clear:left;">」でもside-a要素の上に来る。また、「<BR style="clear:both;">ああ」ではside-a要素の上にはならず右のままである。よく分からない現象である。今のところ私が閲覧する環境ではトラブルが起こっていないようなので放っておくことにする。改善しようと思っても【「clear:both」が抜けていた】と同様にユーザーの力ではどうすることもできないが…。