Question

i am attempting to change an input to look exactly the same as an anchor tag, but for some reason there is a 1/2px gap on the left before text starts. There is also a 1/2px gap on top.

Any idea where these gaps are coming from?

(I have removed padding, margins and borders).

exactly the same problem on safari and firefox.

Answer 1

Here’s the best I could come up with on making an <input type="button" /> appear the same as an <a> element

example jsfiddle

Safari, Chrome, and IE all seem to cooperate pretty well with the following:

input[type="button"], a {
    margin:0;
    padding:0;
    border:0;
    cursor:pointer;
    font:12px/15px Helvetica, Arial, sans-serif;
    color:blue;
    text-decoration:underline;
}

However Firefox (I’m using 6.0.1) required a bit more finesse:

input[type="button"] {
    line-height:15px!important;
}

input[type="button"]::-moz-focus-inner { 
    border:0; 
    padding:0; 
}

This -moz-focus-inner appears to be the culprit for the extra spacing around the element, both border and padding are set in the internal browser stylesheet (goto resource://gre-resources/forms.css in FF to see the stylesheet)

That said Firefox still produced 1 extra pixel above the text that I couldn’t figure out how to remove, though when toggling the button or anchor there was no line-height change meaning the parent div didn’t change heights due to this 1px when toggling the elements.