html - 使用 CSS background-image 删除 <img> 上的边框并将其向下移动一点

Question

这是我的HTML

<p>
    <b>Contact for place A</b><br>
    <img class="mail"> your@email.com<br>
    <img class="phone"> +000 111 222 333
</p>
<p>
    <b>Contact for place B</b><br>
    <img class="mail"> anotherr@email.com<br>
    <img class="phone"> +000 333 222 111
</p>

还有我的 CSS

html, body {
    font-size: 16px;
}
.mail {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png");
    width: 16px;
    height: 16px;
}
.phone {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png");
    width: 16px;
    height: 16px;
}

这里是 jsfiddle 以更好地查看它 http://jsfiddle.net/vLkX8/1/

现在，问题出在哪里。如您所见，该图像上有一个奇怪的边框，我想摆脱他，另一个问题是邮件图标。邮件图标比文本高一点。我怎样才能将它移到底部？

谢谢。

Answer 1

您正在(滥用)使用 img-tag 来做一些它不应该做的事情。将 html 更改为

<p>
    <b>Contact for place A</b><br>
    <div class="mail"></div> your@email.com<br>
    <div class="phone"></div> +000 111 222 333
</p>
<p>
    <b>Contact for place B</b><br>
    <div class="mail"></div> anotherr@email.com<br>
    <div class="phone"></div> +000 333 222 111
</p>

CSS 用于:

html, body {
    font-size: 16px;
}
.mail {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-bottom: -3px;
}
.phone {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-bottom: -3px;
}

fiddle :http://jsfiddle.net/Sumurai8/7gzKB/

通过使用内联 div 标签，它完全没有边界。我添加了 display: inline-block，这样 div 就会像这样在“内联”上下文中正确显示。 margin-bottom: -3px 通过将底部边距向上移动 3 个像素，将图像向下移动 3 个像素。