Html 删除<；img>；使用CSS背景图像并将其向下移动一点

这是我的

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>

这里是JSFIDLE，以便更好地查看它

现在，问题在哪里。正如你所看到的，这张图片上有一个奇怪的边框，我想摆脱他，另一个问题是邮件图标。邮件图标略高于文本。我怎样才能把它移到底部

---

谢谢。

尝试将此添加到CSS中：

img{垂直对齐：底部}

至于这个边界，很简单：

。仅指定背景图像是无效的

也就是说，您可以创建一个1x1透明像素图像，并将其用作源，然后在CSS中使用背景图像。
您（ab）正在使用img标记来完成它原本不打算做的事情。将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>

小提琴：

通过使用内联div标记，它完全没有边界。我添加了
display:inline块
，这样div就可以在这样的“inline”上下文中正确显示<代码>页边距底部：-3px

通过将底部页边距向上移动3个像素，将图像向下移动3个像素。

我有一个使用列表项进行标记的工作示例：

html:

对我来说，你有一个联系人列表。在每个列表中，都有关于这些联系人的bulletpoint项目。使用类来区分标题、邮件和电话信息会更简洁。如果采用我的方法，为特定类添加bg图像很容易，而且标记更具语义

---

此外，使用我的代码可以很容易地解决相对于文本的图像定位问题。您需要编辑背景图像定位，以便根据需要排列。您没有有效的标记。您有一个没有src属性的img元素。为什么不创建一个简单的列表项并为li.mail和li.phone元素定义bg图像？谢谢，效果很好，只是一个细节。删除页边距底部：-3px；手机内。：）如果没有负边距，它在IE9中无法正确显示。然后再一次。。。这就是IE。@chrisvillanueva对li的想法可能在浏览器中更有效。我的意思是，应该只在.mail类中使用，而不在.phone类中使用。：）

<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>

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;
}

<ul class="contact">
    <li class="li-header">Contact for place A</li>
    <li class="mail"> your@email.com </li>
    <li class="phone"> +000 111 222 333 </li>
</ul>
<ul class="contact">
    <li class="li-header">Contact for place B</li>
    <li class="mail"> anotherr@email.com</li>
    <li class="phone"> +000 333 222 111</li>
 </ul>

html, body {
    font-size: 16px;
}
ul.contact{list-style:none;}
li.li-header{font-weight:bold;}
.mail {
    background: #fff url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png") no-repeat 0% 50%;

}
.phone {
    background: #fff url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png") no-repeat 0% 50%;
}

.mail, .phone{
    padding-left:20px;

}