【Web開発】vertical-alignの謎—画像下の余白に悩む

最近、少し余裕ができてきたので、自前のWebサイト「なおさん亭::新館」のメンテナンスなど始めております。昨年の夏あたりから何もやっていないに等しかったので、リハビリがてら、プロジェクトそのものを新しくしよう!と思い立ったのが泥沼になってしまったのですが…。

Shinkan_chrome_01

最初にプロジェクトを作ったのがVisual Studio 2005の時代。その後、2008、2010と環境自体はバージョンアップしてきましたが、プロジェクトはそのままでした。ASP.NET 4の機能も使いたいしということで、プロジェクトを新しくしてしまうことにしました。

詳細は割愛するのですが、そのままマークアップファイルやコードファイル、スタイルシートファイルなどを移していっても、なぜか以前と同じようにレンダリングされないのですね。特に、冒頭の画面のように、バナー画像の下に不可解な空白があるのには悩みました。

なおさん亭–新館

現在の新館をみていただけるとわかるのですが、バナーとメニューの間に空白などありゃしません。実はこれはこれで面倒な問題だったのですが、よくよく調べていったら、バナー画像の下にも少し余白があるのです。

私は、軽いという理由でデバッグにはChromeを使っているのですが、この開発者ツールで調べてみると、画像に相当する<img>タグの高さは128px、ですがそれを囲む<a>タグの高さは134pxなのです。6px、どこからか湧いて出てきていることになります。

Shinkan_chrome_02

結果的には、<img>要素にスタイルを指定し、vertical-alignをbottomにすれば解決するのですが、どうも腑に落ちません。親要素の<a>には文字がないから、揃える場所もないはずだからです。

ということで、この調査はしばらく続きそうです。

コメント