0

Web サイトのテーマを設定しようとしていたときに、ハイパーリンクで画像を使用すると奇妙な動作が発生することがわかりました。サンプルコードは次のとおりです。

<div id="maindiv">   <a href="google.com">
     <img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16">
</a> </div>

ここでプレビューすることもできます: http://cssdeck.com/labs/vzine2bc

ご覧のとおり、画像には奇妙なマージンがあり、マージンを作成するものは何もありませんが、含まれている div はそれを正確にカバーしていません。これは<a href>行動ですか、それともポイントがありませんか?

4

3 に答える 3

1

img { display: block; } またimg { display: inline-block; }それを修正する必要があります。

ここでフィドルを参照してください：http://jsfiddle.net/zitrusfrisch/7vh8Y/

編集：

コメントに記載されている@Zettamimg { display: inline-block; }は問題を解決しません。したがって、img { display: block; }インラインで表示するためにオプションではない場合は、次の代替手段を試してください。

  1. 画像を表示しますfloat: left;が、何らかの方法でフローティングをクリアすることを忘れないでください。たとえば、ラッピング要素をoverflow: hidden;( http://jsfiddle.net/zitrusfrisch/7vh8Y/1/ )に設定します。
  2. font-size: 0px;ラッピング要素 ( http://jsfiddle.net/zitrusfrisch/7vh8Y/2/ )
  3. img { vertical-align: middle; }フォントサイズが画像より大きくない限り、同様に機能します（http://jsfiddle.net/zitrusfrisch/7vh8Y/3/）
于 2013-11-02T21:00:24.037 に答える
0

これを試して：

a img { border: 0; }
于 2013-11-02T17:33:53.090 に答える