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

Question

我在网页上使用了按钮标记，在其中使用了图片，您可以在下方看到：

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

但在浏览器中，图像周围有一些空白区域。你可以在下面的图片上看到它。我用红框标记了图像。

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

Answer 1

试试这个CSS：

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

请参阅此小提琴：http://jsfiddle.net/7Dw7q/1/

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

#btnLogin img{
    margin:-2px;
}

输出：http://jsfiddle.net/7Dw7q/3/

Answer 2

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

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

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

完全相同

Answer 3

试试这个：

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

编辑：border-size不存在

Answer 4

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

padding:0px;

Answer 5

您可以使用input标记创建带图片的按钮。 它的工作方式类似于表单中的button标记。

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

您可以在this jsfiddle上播放演示。

干杯， 托马斯。

Answer 6

这个问题的正确答案是; img在一个按钮内。这使得在图像的<img/>标签之后有一个物理空间。

img标签应该与按钮标签接壤，就像这样;

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

之间的空格实际上是因为你正在使用button元素而被渲染。此外，图像有时会出现这样的错误，在这种情况下，您可以给它们display:block;。

请see this article了解更多阻止这种情况发生的方法！