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

我把两幅图像垂直放在一起，但是有一个缺口，我尝试了一切，但我找不到什么是错的？在这个网站上（左下黄色图像）， 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:[email protected]"> </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 ;}

来源

2013-06-06 James Xu

该网站不可访问，而是尝试在两个元素取出填充和边框...（'填充：0;边界：0 ;'） – Kroltan

你应该总是在问题中包含相应的'html'code，而不仅仅是链接到你的页面。否则，如果你解决了你的问题或者你的页面消失了，那么你的问题就不会像其他人那样有帮助。 –

对不起，我尝试从我的主题中提取HTML，但不起作用。所以，只需在这里放置CSS。 –

那是因为那些2个A标签（.email & .message）是inline-block和以换行符（Enter）字符分隔。

将这些2 A元素更改为display: block;，你会没事的。

来源

2013-06-06 08:47:29 haim770

添加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:[email protected]"> </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>

来源

2013-06-06 08:48:34

更改显示类型，只是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：

enter image description here

来源

2013-06-06 08:48:51 George

德雅VUE，一个前两天，像站在底线:)

这是你正在寻找Table Cell padding-bottom in CSS not working（约图像）

来源

2013-06-06 08:54:26

在a.email类

答案，尝试“显示：块;”代替inline-block的

来源

2013-06-06 09:02:22 Ghurdyl

变化

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

到

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

来源

2013-06-06 09:07:30 Daniel

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

回答

相关问题