为什么两个垂直图像之间有间隙？答案

【问题标题】：Why there is a gap between two vertical images?为什么两个垂直图像之间有间隙？
【发布时间】：2013-06-06 17:14:03
【问题描述】：

我将两张图片垂直放在一起，但有一个间隙，我尝试了所有方法，但我找不到问题所在？在这个网站上（左下黄色图片）， 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 ;}

【问题讨论】：

该站点无法访问，但请尝试删除两个元素上的填充和边框... (padding: 0; border: 0;)
您应该始终在问题中包含相应的htmlcode，而不仅仅是链接到您的页面。否则，如果您解决了您的问题或您的页面消失了，那么您的问题对其他人的帮助就没有那么大了。
对不起，我尝试从我的主题中提取 HTML 但不起作用。所以只要把 CSS 放在这里。
致Kroltan，来自bluehost.com的主机，不知道为什么无法访问。

标签： css image

【解决方案1】：

那是因为这 2 个 A 标记（.email 和 .message）是 inline-block 并由换行符 (Enter) 分隔。

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

【讨论】：

【解决方案2】：

为.pic_wrap 内的所有元素添加display: block;，目前您的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>

【讨论】：

【解决方案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 中尝试和测试：

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

改变

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

到

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

【讨论】：