ホームページ > 記事 > ウェブフロントエンド > aタグに画像を追加すると、画像の下とaタグの枠線の間に隙間ができるのはなぜですか? _html/css_WEB-ITnose
aタグに画像を追加すると、画像の下とaタグの枠線の間に隙間ができるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:23:282687ブラウズ
<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" /></a>
上記のコードでは、画像の下部が a タグの下の境界線に近づいていないのですが、これはなぜでしょうか。
aタグとimgタグはどちらもインライン要素なので試してみましたが、aタグとimgタグの両方をblockに設定すると、aタグのみblockを設定すると2つの要素が完全に重なってしまいます。 img画像とa ラベルの下の枠に隙間がまだあるのですが、理由がわかりません。回答をお願いします。
ディスカッションへの返信（解決策）
リセットが不完全であることが原因である可能性があります。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" /></a></body></html>
リセットが不完全なことが原因である可能性があります。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" /></a></body></html> まだ同じですが、まだギャップがあります
1 つ少なく書きました: img{vertical-align:middle;}
それをローカルにコピーして実行します。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} img{vertical-align:middle;} .link{ display:inline-block; *display:inline; *zoom:1;} </style></head><body><a class="link" style="border:1px solid red;" id="nana" href="#"><img src="http://dummyimage.com/600x400/" /></a></body></html>
リセットが不完全なことが原因である可能性があります。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" /></a></body></html> 完全に??
<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" /></a>
上記のコードでは、画像の下部が a タグの下の境界線に近づいていません。これはなぜですか?
aタグとimgタグはどちらもインライン要素なので試してみましたが、aタグとimgタグの両方をblockに設定すると、aタグのみblockを設定すると2つの要素が完全に重なってしまいます。 img画像とa ラベルの下の枠に隙間がまだあるのですが、理由がわかりません。回答をお願いします。
このギャップは非常に古典的なものです。
理由は非常に基本的なものです。
もともと確立されたのは大陸ではなく大陸であるため、
inline 要素は y j g
のような正しい英文字を表します。尻尾
? 下部にスペースを残し、フォント サイズに従って決定する必要があります
? 主に、任意のテキストの場合、フォント サイズを決定できます
注:
もちろん、画像の垂直方向の配置指定はベースラインなしでも解決できます
ただし、ルールに従って、IE バージョンではテキストの垂直方向の配置が「異なります。」
それは英語の文字の尻尾のせいでした、、、上の二人のマスターに感謝します〜🎜
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。