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


i've got multiple textareas. 1 underneath other. there should not spacing between them, since explicitly set margin 0.

however on chrome, there rather larger gap, on firefox it's small, still there, , on ie actually behaves intended.

enter image description here

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 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 play around

does have clue? thank in advance!

you need add display: block; 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; } 

Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -