html - 元素上方的空间是什么？

Question

我有一个带有一些文本的跨度，在它下面应该是一个文本区域和一个大方形按钮，并排放置。文本区域和跨度之间，或者按钮和跨度之间，应该没有垂直空间。文本区域完美显示。但是，该按钮上方有大约 15-20 像素的空白空间，因此它看起来比文本区域低很多，而不是很好地排列。我告诉它设置 padding 和 margin 为 0px，那么 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>

还有 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

这个:

#send {
    vertical-align: top; 
}

现场演示: http://jsfiddle.net/YSHmE/2/