What are the default styles of a text input?

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 开发者_StackOverflow社区are coming from?

(I have removed padding, margins and borders).

exactly the same problem on safari and firefox.

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.

Well, the defaul styles for html elements such as text imputs differ from browser to browser. You must make sure to override ALL of them in your css if you want the thing to look the same on all browsers. For each of the major browsers you have some kind of inspect tool such that when you right click on an element in the page, it offers you the "inspect" option which shows you exactly what css properties the thing has. For chrome and safari this is build it. For firefox install the firebug plugin. For ie8+ install the dev toolbar.