Image in Button: Strange space

问题

First the result in Firefox 4 Beta 8:

Button vs Div http://b.imagehost.org/0419/buttonSpace.png

The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.

Here the CSS file:

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

回答1:

Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0

In that bug report there is a fix for the problem:

button::-moz-focus-inner {padding:0; border:0}

回答2:

I think you have to set a width for the div

回答3:

It looks like the padding you're asking for is not being applied. Have you tried setting it explicitly on the button?

来源：https://stackoverflow.com/questions/3912731/image-in-button-strange-space