White spaces around image inside a button tag?

Question

I'm using a button tag on a webpage and inside of it an image, you can see it below:

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

But in browser, there are some white spaces around the image. You can see it on an image below. I marked the image with red frame.

How can i remove these white spaces around the image? This design came from a designer and i have no time to make him change this. Thanks in advance.

Answer 1

Add the following style to your button and image

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

You can also set the width and the height of the button to be exactly the same as the image