html - css の影が画像の下部に正しく適用されない

Question

私はこのhtml/cssでホームページに取り組んでいます: http://jsfiddle.net/2qWYf/5/

画像に適用した影が、画像の下線の下にいくつかのピクセルを表示し始めている理由がわかりません。

むしろ右側でOK(!?!) なぜ？

これを修正する方法は？

どうもありがとう、 アレッサンドロ

Answer 1

これは、画像 (およびリンク) を囲む要素に影を適用しているためであり、それがその要素のサイズです。

次に、その要素がそのサイズである理由は、画像がテキストブロックのベースラインに配置されるインライン要素であるためです。g画像の下のスペースは、や などの吊り下げ文字のベースラインの下のガターjです。

これを処理する最も安定した方法は、画像をブロック要素に変換することです。

.homepageimage img { display: block; }

(周囲のアンカー要素は、適用float: left;したとおり既にブロック要素です。それ以外の場合は、それもブロック要素に変換する必要があります。)

Answer 2

(デモ)に追加line-height: 0pxします。.homepageimage a

Answer 3

これを修正するにはおそらく多くの方法がありますが、私にとっては 2 つの方法が際立っています。

に 200px の高さを追加するだけ.homepageimageです。例：

.homepageimage {
    height: 200px;
}

...または に追加margin-bottom: -3px;し.homepageimage aます。例：

.homepageimage a {
    text-decoration: none;
    float: left;
    margin-bottom: -3px;
}