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

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

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

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

Answer 2

你可以：

1 - 将display:block添加到所有孩子。

演示：http://jsfiddle.net/JTmrk/2/

2 - 在父div上设置font-size:0并在所有孩子身上重置（例如font-size:16px）。

演示：http://jsfiddle.net/JTmrk/3/

3 - 将float:left和clear:both设置为所有孩子。

演示：http://jsfiddle.net/JTmrk/5/