为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css

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

php中文网

发布： 2016-06-21 09:23:28

原创

2810人浏览过

<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#">@@##@@</a>

登录后复制

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

回复讨论(解决方案)

可能没有完整的reset导致的。

            <a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#">@@##@@</a>

登录后复制

可能没有完整的reset导致的。

            <a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#">@@##@@</a>

登录后复制

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

我少写了个：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="#">@@##@@</a></body></html>

登录后复制

可能没有完整的reset导致的。

            <a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#">@@##@@</a>

登录后复制

完全??

<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#">@@##@@</a>

登录后复制

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

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

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

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