Getting an <input> button and an to equa

Question

I've run across the following issue in HTML/CSS: For my (offline) site, there are a link and a submit button (which is inside a form) right next to each other, like this:

<a href='settings.php' class='button'>Settings </a>

<form action='processing/logout.php' method='POST' class='inline'>
    <input type='submit' value='Sign out' class='redbutton'>
</form>

When both of the elements are links, then they line up next to each other perfectly. Now, however, even though the link and button have the same CSS styling associated with them, then input button is annoyingly larger (in height) than the link (though it's barely visible when glancing over).

I created a jsFiddle to demonstrate.

People on other forums asked for the reset CSS, so I included that as well, even though deleting it doesn't remove the problem.

How can I get the link and the input button to be the same height? Is it something obvious I missed? Is there a CSS trick to get them to be the same height?

Answer 1

It's 2015 and you still can't style a link to look like a button every single time (at least in Firefox). The best method is to give both these styles:

box-sizing, vertical-align, padding, font-size, line-height

but if you set height to auto (or leave the default value) it still will not match. So you need the auto value for height- Rob W method is the best one.

Answer 2

Had the same problem. Tom's answer helped me.

Had to add:

box-sizing: border-box;
font-size: 15px;
font-family: "DejaVu Serif";

Additional I had: margin, border, padding, width

Answer 3

Using display: inline-block on your button class should do the trick. http://jsfiddle.net/VB9RM/17/

Answer 4

On top of Tom's answer, the important style which is hard to find is

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

Answer 5

The size of the (inline) anchor element is treated inconsistently across different browsers.

The solid solution is to place a button inside a link. Fiddle: http://jsfiddle.net/m5m5M/22/.

<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>

Note that I have omitted whitespace between the buttons. That's because inline elements show a gap between each other when there's any whitespace in the HTML.