html - 当按钮直接放置在文本区域下方时会创建额外的空间

Question

将按钮直接放在文本区域下方时，Chrome 和 Firefox 都会创建额外的空间(我没有测试过其他浏览器)。这是一个 fiddle复制问题。这是代码:

HTML

<div>
    <textarea></textarea>
    <button></button>
</div>

CSS

div {
    width: 100px;
    height: 125px;
}
textarea {
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: red;
    resize: none;
}
button {
    width: 100px;
    height: 25px;
    border: none;
    background: blue;
    margin: 0;
    padding;
}

Answer 1

将 textarea 上的 display 属性更改为 block，它们之间应该没有间隙地排列。一般来说，当我有一些 HTML 元素没有正确排列时，我会使用 display 属性，因为它通常是罪魁祸首。

演示:http://jsfiddle.net/8kzpf/