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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -