Html 按钮标签内图像周围的空白？

我在网页上使用了一个按钮标签，里面有一个图像，你可以在下面看到：

<button runat="server" id="btnLogin">
   <img src="images/login.png" />
</button>

但在浏览器中，图像周围有一些空白。你可以在下图中看到它。我用红框标记了这幅图像

如何删除图像周围的空白？这个设计来自一个设计师，我没有时间让他改变这个。提前感谢。

试试这个：

<button runat="server" id="btnLogin" style="border-width: 0px;">
    <img src="images/login.png" style="border-width: 0px;" />
</button>

编辑：边框大小不存在尝试此CSS:

#btnLogin{
    border-width:0px;
    padding:0px;
}

看这把小提琴：

如果你仔细观察，在上面的提琴中，它仍然显示一个浅银色边框。如果你想删除它，请将此CSS添加到上面：

#btnLogin img{
    margin:-2px;
}

---

输出：

尝试将以下内容添加到CSS中

padding:0px;

---

将以下样式添加到按钮和图像中

<button runat="server" id="btnLogin" style="padding:0; width:auto; height:auto">
     <img src="images/login.png" style="margin:0; padding:0" /> 
</button>

---

您还可以将按钮的宽度和高度设置为与图像完全相同

您可以使用

输入

标记创建带有图像的按钮。 它的工作原理类似于表单中的

按钮

标记

<input type="image" src="http://i.imgur.com/EJ3W1KM.jpg" />

您可以在上播放演示

干杯，

---

托马斯。这个问题的正确答案是；img在一个按钮内。这使得

由于使用了

按钮

元素，因此中间的空白实际上会被渲染。此外，图像有时也会有这样的错误，在这种情况下，你可以给它们一个

display:block

请了解更多防止这种情况发生在您身上的方法
 在图像中添加“边距”和“填充”不会产生任何变化。将我的答案小提琴和带有边距和填充的小提琴与图像进行比较。您将看不到任何变化。您如何知道这一点？你看到他的页面元素继承了什么css样式了吗？显然，我想做的是重置他的按钮和图像可能继承的每个框相关css样式看到他的图像我认为他没有对其中的按钮元素或图像应用任何css是吗？我得说你有一双漂亮的眼睛。好东西！这是假设图像没有在其他地方指定任何边距，或者按钮没有指定任何宽度和/或高度
<button runat="server" id="btnLogin" style="border-width: 0px;"><img src="images/login.png" style="border-width: 0px;" /></button>