HTML：为什么按钮元素总是略微低于其他元素？

Question

I have noticed that the <button> element in HTML always appears slightly lower than other elements as shown in the figure below.

As you can see, the "Go" button is slightly lower than the textarea element which on the same row as it is. The code for this is as follows...

<table width="100%">
            <tr>
                <th rowspan="2" align="left">
                    <img width="120px" height="60px" src="test-image.jpg" />
                </th>
                <th align="right">
                    User &nbsp;&nbsp;
                    <a href="">My Garage</a> &nbsp;|&nbsp;
                    <a href="">Account Settings</a>&nbsp;|&nbsp;
                    <a href="">Sign Out</a> &nbsp;|&nbsp;
                    <br/>
                    <textarea rows="1" id="search_text"></textarea><button>Go!</button>
                </th>
            </tr>
        </table>

Why does this happen and what is the easiest fix for this ?

Answer 1

Try applying vertical-align: text-bottom; to your button.

Answer 2

You should be using an input tag, not a textarea for a single row. Try this code:

<input type="text" id="search_text"><button>Go!</button>​​​​​​​​​​​​​​​​​​​​​​