Image in Button: Strange space

StackOverflow https://stackoverflow.com/questions/3912731

  •  29-09-2019
  •  | 
  •  

Question

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;
}
Was it helpful?

Solution

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}

OTHER TIPS

I think you have to set a width for the div

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top