Question

On this page there’s a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don’t understand why because they both have the same:

• font-size
• top and bottom border sizes
• top and bottom padding sizes

I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?

Update

I’m not bothered about supporting IE <= 7

Answer 1

You have to define height of your buttons.

of Write like this:

a.primaryAction, .primaryAction.matchLink {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    height: 30px;
    padding: 5px 11px;
    text-decoration: none;
}