CODEWITHSUNDEEP
htmlcss
Erdem Gundogdu
Erdem Gundogdu

Reputation: 287

White spaces around image inside a button tag?

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.

enter image description here

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.

Upvotes: 3

Views: 3798

Answers (6)

NoobishPro
NoobishPro

Reputation: 2549

The correct answer to this question is; The img is within a button. That makes it so there's a physical space after the <img/> tag of the image.

The img tag should be bordering the button tag, like so;

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

The whitespace in between actually gets rendered because you're withing a button element. Also, images do have such bugs sometimes and in those cases you can just give them a display:block;.

Please see this article for more ways of preventing this from happening to you!

Upvotes: 0

Zword
Zword

Reputation: 6793

Try this CSS:

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

See this Fiddle: http://jsfiddle.net/7Dw7q/1/

If you notice closely ,in the above fiddle it still shows a light silver border around.If you want to remove that too the add this CSS to the above:

#btnLogin img{
    margin:-2px;
}

Output: http://jsfiddle.net/7Dw7q/3/

Upvotes: 1

tzi
tzi

Reputation: 9459

You could use the input tag to create a button with an image. It works like a button tag in a form. 

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

You can play with a demo on this jsfiddle.

Cheers, Thomas.

Upvotes: 0

Kamelkent
Kamelkent

Reputation: 329

Try adding the following to your CSS.

padding:0px;

Upvotes: 0

Khaled Hamdy
Khaled Hamdy

Reputation: 386

Try this:

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

EDIT: border-size does not existst

Upvotes: 0

Leo
Leo

Reputation: 14820

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

Upvotes: 2

Related Questions