1

簡単なコード：

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
        <img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

2つの画像のマージンとパディングは0ですが、それらの間にはまだギャップがあります。

この動作を回避する方法は？

はい、それは間違いではありません。すべてがAタグに含まれている必要があります。

例：

http://jsfiddle.net/fqrfU/

4

9 に答える 9

3

問題を引き起こしているのは行の高さだと思います。それをチェックしてください。

別の言い方をすれば、そのようにするつもりだったとあなたが言ったことは知っていますが、実際にはdivタグをアンカー内に持つことは無効な (?) HTML です。span代わりに sを使用してみてください。

于 2011-02-14T19:48:51.613 に答える
2

2 つの画像がインラインで表示されます。これは、画像のベースラインがテキストのベースラインと一致することを意味します。通常、テキストの下には、ベースラインより下にあるような文字を考慮して、もう少しスペースがありますpjgq。

画像を作成するだけdisplay: block;で、シナリオでこれが解決されます。

このページはあなたの状況を非常に明確に説明しています: http://devedge-temp.mozilla.org/viewsource/2002/img-table/

于 2011-02-14T19:52:21.657 に答える
1

両方に追加display:block;

デモ: http://jsfiddle.net/fqrfU/22/

于 2011-02-14T19:50:29.697 に答える
0

それらを浮かせてクリアすることができます：

img {
    clear: both;
    float: left;
}

http://jsfiddle.net/lukemartin/fqrfU/11/

于 2011-02-14T19:48:13.283 に答える
0 
<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>
于 2011-02-14T19:48:14.027 に答える
0

IEに問題がありますか？間にスペースを入れずに、HTML の同じ行に両方の画像タグを配置してみてください...

于 2011-02-14T19:51:12.677 に答える