Unexpected margin between textareas - varies from browser to browser - html

Question

I've got multiple textareas. One underneath the other. There should not be any spacing between them, since I explicitly set their margin to 0.
However on chrome, there is a rather larger gap, on firefox it's small, but still there, and on IE it actually behaves as intended.
body{
background-color: #0087B3;
font-family: Helvetica, sans-serif;
}
.editor {
width: 460px;
display: inline-block;
}
.panel{
text-align: left;
margin: 10px;
padding: 12px;
background-color: rgba(255,255,255,0.1);
}
.panel .toolbar{
background-color: #007da6;
height: 40px;
}
.panel .lines{
height: 400px;
background-color: #ACE1F2;
}
.panel .lines textarea{
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
}
<div class="editor">
<div class="panel" id="panel">
<div class="toolbar"></div>
<div class="lines">
<textarea rows="1">There should be no space</textarea>
<textarea rows="1">between these textareas</textarea>
<textarea rows="1">however in chrome & firefox there is</textarea>
<textarea rows="1">except internet explorer</textarea>
</div>
</div>
</div>
JSFiddle to play around
Does anyone have a clue?
Thank you in advance!

Answer 1

You need to add display: block; to your textarea styles
.panel .lines textarea {
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
display: block;
}

Answer 2

Please check the updated fiddle here : https://jsfiddle.net/fu3ytLpt/4/
The only fix was to assign the display to match the box sizing.
display: -webkit-box;