Why is my image so high on the page?

I have two buttons on a webpage, I am trying to make the Clear button be a 开发者_如何学运维little lower, to align with the Search button. Why is the Clear button so high?

Here is a live example: http://www.davidjpotter.com/temp/test.php

<table border=1>
<tr>
<td>
  <button type="submit">Search</button>
  <img src="../images/button-clear.png">
</td>
</tr>
</table>

---

Replace this:

<img src="../images/button-clear.png">

with this:

<img src="../images/button-clear.png" style="vertical-align: bottom; ">

---

It's high because the default value of the vertical-align CSS property is baseline. This applies to all elements with display: inline, which includes <img> elements.

Try instead setting it to middle:

<img src="../images/button-clear.png" style="vertical-align:middle" />

---

This has to do with vertical alignment of the image which is an inline element and it's set to the baseline. Add 'vertical-align:bottom' to line them up.