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.
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> 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
Post a Comment