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.