为什么两个垂直图像之间存在差距？

Question

我把两张图像垂直放在一起，但是有一个间隙，我尝试了一切，但我只是找不到有什么问题？ 在这个网站上（左下角黄色图片）， http://www.jamesxu.com.au/contact

HTML

<div class="pic_wrap">  
    <img id="contact" src="http://www.jamesxu.com.au/wp-content/themes/BLANK-Theme-realone/images/contact_01.png"> 
    <a class="email" href="mailto:hi@jamesxu.com.au"> </a>
    <a class="message" href="http://www.jamesxu.com.au/contact/"> </a>
</div>

CSS

.pic_wrap {width:216px; margin:auto;}
a.email {background:url(images/ico.png) left -80px no-repeat; display:inline-block; width:216px; height:35px; line-height:0; font-size:0;}
a.email:hover {background:url(images/ico.png) left -120px no-repeat ; }

a.message {background:url(images/ico.png) left -164px no-repeat; display:inline-block; width:216px; height:45px; line-height:0; font-size:0;}
a.message:hover {background:url(images/ico.png) left -208px no-repeat ;}

Answer 1

这是因为这两个A代码（.email＆amp; .message）为inline-block，并以换行符（回车）字符分隔。

将这2个A元素更改为display: block;，您就可以了。

Answer 2

为display: block;内的所有元素添加.pic_wrap，目前您的a代码位于display: inline-block

<div class="pic_wrap">  
  <img id="contact" src="http://www.jamesxu.com.au/wp-content/themes/BLANK-Theme-realone/images/contact_01.png"> 
  <a class="email" href="mailto:hi@jamesxu.com.au"> </a> //<--this needs to be display:block
  <a class="message" href="http://www.jamesxu.com.au/contact/"> </a> //<-- this needs to be display: block
</div>

Answer 3

将显示类型更改为block：

a.email {background:url(images/ico.png) left -80px no-repeat; display:block; width:216px; height:35px; line-height:0; font-size:0;}
a.message {background:url(images/ico.png) left -164px no-repeat; display:block; width:216px; height:45px; line-height:0; font-size:0;}

在Chrome中尝试并测试过：

Answer 4

几天前Déjavue，图像站在基线上:)

这是您正在寻找的答案Table Cell padding-bottom in CSS not working（关于图片）

Answer 5

在你的a.email类中，尝试“display：block;”而不是内联块

Answer 6

更改

a.email   { display: inline-block; }
a.message { display: inline-block; }

到

a.email   { display: block; }
a.message { display: block; }