<再掲>div_html/css_WEB-ITnoseのimgのズレ問題を解決する

転載元: http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html

写真をカットする練習をしていると、img と親の間に常に 2px のギャップ (クローム) があることがわかりました。ディビジョンをオンラインで検索しました。

画像 IMG とコンテナの下枠の間に隙間がある場合はどうすればよいですか?ここでは 3 つの簡単な解決策を紹介します。

まず、画像にimgタグdisplay:blockを付与します。

img{display:block}

次に、コンテナ内のフォント サイズを 0 として定義します。

div{　　width:110px;　　border:1px solid #000000;　　font-size:0px;}

3番目に、画像の img タグを定義しますvertical-align:bottom、vertical-align:middle、vertical-align:top

img{vertical-align:bottom}

その他には、画像の下マージンをマイナスに設定することも含まれます値を変更してHTMLタグの配置を書き換えます。最初の3つは完全に解決できると思います。

IEで画像とコンテナの下枠との間に隙間ができる理由をネットで調べたところ、old9では画像テキストなどのインライン要素はデフォルトで親要素のベースラインに合わせて配置されると書いてあり、ベースラインは親の下端と一定の距離で揃えられます (この距離は font-size と font-family に関係し、必ずしも 5px である必要はありません)。そのため、vertical-align:top/bottom/text-top/text- を設定します。一番下にあるとこの状況を回避できます。また、li だけでなく、img を含む他のブロック要素でもこの現象が発生します。

HTML 属性 align="center" (画像ブラウザの場合、align="middle" として処理されます) については、vertical-align:middle と同等であるため、垂直である限り原理は同じです。 -align はベースラインを取らず、このギャップはちょうど消えました。