<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a>
可能没有完整的reset导致的。
<!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="max-width:90%" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>
可能没有完整的reset导致的。
<!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="max-width:90%" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html> 我少写了个：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="max-width:90%" id="nana" href="#"><img src="http://dummyimage.com/600x400/" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>
可能没有完整的reset导致的。
<!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="max-width:90%" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>
<a style="max-width:90%" id="nana" href="#"><img src="Images/%e5%a8%9c%e5%a8%9c.jpg" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a>
?充：
?然??片的vertical-align 指定?非baseline也能解???
但?人是不建?，依???，?IE版在文字垂直置中有著「不一?的解?」
竟然是因为英文字母的尾巴，，，多谢楼上两位大神~
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
