[解決済み] Embed image in a <button> element

Question

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all. In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.

This is the HTML code:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px , so it's very noticable... I tried margin:0 , padding:0 しかし、それは役に立たなかった......。

解決方法は？

input type imageを使用するとよいでしょう。

<input type="image" src="http://example.com/path/to/image.png" />

ボタンとして機能し、イベントハンドラを付けることができる。

また、CSSを使用して、ボタンに背景画像を表示し、ボーダーやマージンなどを適切に設定するスタイルにすることも可能です。

<button style="background: url(myimage.png)" ... />