Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
131 views
Welcome To Ask or Share your Answers For Others

1 Answer

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}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...