css - Why div adds 4 pixels on the bottom of a textarea on chrome and safari (but not on firefox)? -
i try put red textarea on bottom of page:
https://jsfiddle.net/akcmd94u/5/
html
<div class="footer"> <textarea rows=1></textarea> </div>
css
.footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 0; margin:0; } textarea { background-color: red; border: none; padding: 0; margin:0; height: 30px; }
on latest firefox, textarea correctly on bottom.
but on latest chrome , latest safari, there's gap between bottom border , textarea.
how remove gap on chrome , safari?
that's because textarea displayed inline element. so, way it's height calculated not expect block element.
this solve issue:
textarea { display: block; }
also, way guarantee both textarea , container have same height. cheers.
Comments
Post a Comment