Question

I am using CSS to make input button look like a link.

I’ve styled it like this:

input#linkLike {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    display: inline;
    vertical-align: baseline;
}

This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.

http://jsfiddle.net/S4nF9/5/

Where this whitespace comes from, and how can I remove it?

Answer 1

According to this page,

Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important; 
}

So that’s Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)

I don’t have IE here, so I can’t test that now, sorry.