html - Extra space is created when a button is placed directly below a text area -

when placing button directly below text area, space created in both chrome , firefox (i haven't tested other browsers). here's fiddle replicates issue. here's code:

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; } 

change display property on textarea block , should line without gap in-between. in general when have html elements not lining-up properly, play display property it's culprit.

demo: http://jsfiddle.net/8kzpf/