html - 上面的空间是怎么回事元素？

Question

我有一个带有一些文本的跨度，它下面应该是一个文本区域和一个大方形按钮，并排。文本区域和跨度之间或按钮和跨度之间不应有垂直空间。textarea 看起来很完美。然而，该按钮上方有大约 15-20 像素的空白空间，因此它看起来比文本区域低很多，而不是整齐地排列。我告诉它将填充和边距设置为 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/

Answer 2

我使用了 vertical-align: top，但它仍然有空格。使用display: block解决问题，没有空格。