td containing input type="submit" becomes taller than the input, amount is different between browsers

Question

I have a table cell containing an input:

<body>
  <table>
    <tr>
      <td><input type="submit" class="submitbutton" value=""/></td>
    </tr>
  </table>  
</body>

That input is styled to have a height of 20 pixels:

table
{
  border-spacing: 0;
  border-collapse: collapse;
}

td
{
  padding: 0;
}

.submitbutton
{
  width: 19px;
  height: 20px;
  border: 0px;
  outline: none;
  margin:0;
}

http://jsfiddle.net/VhhPf/2/

When I use firefox and look in the layout tab, I can see that the input is having height 20, but the td is for some reason having the height 21. In chrome, the td will get the height 24.

Why?

enter image description here

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

It is an inline element, therefore it is being aligned to the baseline of your text.

Add vertical-align:bottom.

td containing input type="submit" becomes taller than the input, amount is different between browsers

1 Answers1