为什么在a标签中添加一张图片,图片下方和a标签的边界会有一些空隙?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:23:28
Original
2685 Leute haben es durchsucht

<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>
Nach dem Login kopieren


如上的代码,图片最下方并不是紧贴着a标签下边界的,会有一条缝隙,这是为什么呢?
a标签和img标签都是内联元素,我试了下,如果把a标签和img标签都设置成block,两个元素就会完全重合,如果只给a标签设置block,img图片下方和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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

可能没有完整的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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren



还是一样额,还是有空隙的

我少写了个: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>
Nach dem Login kopieren

可能没有完整的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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren



完全??




<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>
Nach dem Login kopieren


如上的代码,图片最下方并不是紧贴着a标签下边界的,会有一条缝隙,这是为什么呢?
a标签和img标签都是内联元素,我试了下,如果把a标签和img标签都设置成block,两个元素就会完全重合,如果只给a标签设置block,img图片下方和a标签下边界同样还是会有一条缝隙,还是搞不懂为什么,求大神解答!




?空隙是?很?典的??,
原因其?非常的基本,
因??初?立??的不是?洲而是?洲,
inline 元素?了正?的?示英文字母像是 y j g ?有尾巴的
?在底下留空,?要依? font-size 去?定
?主如果a??任何文字,font-size可以?定? 0

?充: 
?然??片的vertical-align 指定?非baseline也能解???
但?人是不建?,依???,?IE版在文字垂直置中有著「不一?的解?」

竟然是因为英文字母的尾巴,,,多谢楼上两位大神~

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage