html - ボタンがテキスト領域の真下に配置されると、余分なスペースが作成されます

Question

テキスト領域のすぐ下にボタンを配置すると、Chrome と Firefox の両方で余分なスペースが作成されます (他のブラウザーはテストしていません)。問題を再現するフィドルを次に示します。コードは次のとおりです。

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

あなたはできる：

1 - すべての子に追加display:blockします。

    デモ: http://jsfiddle.net/JTmrk/2/

2 -font-size:0親 div で設定しfont-size:16px、すべての子でそれをリセットします (例: )。

    デモ: http://jsfiddle.net/JTmrk/3/

3 -すべての子にfloat:leftandを設定します。clear:both

    デモ: http://jsfiddle.net/JTmrk/5/