Question

I have a span with some text, and beneath it should be a textarea and a big square button, side by side. There should be no vertical space between the text area and the span, or between the button and the span. The textarea appears perfectly. The button, however, has about 15-20px of blank space above it, so that it appears quite a bit lower that the text area, rather than being nicely lined up. I told it to set padding and margin to 0px, so what the F?

<span class="notice">
Logged in as "ladygaga" (type message and hit ENTER or click SEND)
</span>

<textarea id="messagebox">
</textarea>
<button id="send">SEND</button>

And the CSS:

#messagebox
{
width:300px;
height:40px;
background-color:white;
border:2px;
border-style:solid;
border-color:green;
overflow:auto;
resize:none;
}

#send
{
margin:0px;
padding:0px;
font-size:14px;
height:40px;
width:50px;
}

Answer 1

This:

#send {
    vertical-align: top; 
}

Live demo: http://jsfiddle.net/YSHmE/2/