最近、少し余裕ができてきたので、自前のWebサイト「なおさん亭::新館」のメンテナンスなど始めております。昨年の夏あたりから何もやっていないに等しかったので、リハビリがてら、プロジェクトそのものを新しくしよう！と思い立ったのが泥沼になってしまったのですが…。
最初にプロジェクトを作ったのがVisual Studio 2005の時代。その後、2008、2010と環境自体はバージョンアップしてきましたが、プロジェクトはそのままでした。ASP.NET 4の機能も使いたいしということで、プロジェクトを新しくしてしまうことにしました。
詳細は割愛するのですが、そのままマークアップファイルやコードファイル、スタイルシートファイルなどを移していっても、なぜか以前と同じようにレンダリングされないのですね。特に、冒頭の画面のように、バナー画像の下に不可解な空白があるのには悩みました。
現在の新館をみていただけるとわかるのですが、バナーとメニューの間に空白などありゃしません。実はこれはこれで面倒な問題だったのですが、よくよく調べていったら、バナー画像の下にも少し余白があるのです。
私は、軽いという理由でデバッグにはChromeを使っているのですが、この開発者ツールで調べてみると、画像に相当する<img>タグの高さは128px、ですがそれを囲む<a>タグの高さは134pxなのです。6px、どこからか湧いて出てきていることになります。
結果的には、<img>要素にスタイルを指定し、vertical-alignをbottomにすれば解決するのですが、どうも腑に落ちません。親要素の<a>には文字がないから、揃える場所もないはずだからです。
ということで、この調査はしばらく続きそうです。