acemtp acemtp - 9 months ago 34
CSS Question

Why div adds 4 pixels on the bottom of a textarea on chrome and safari (but not on firefox)?

I try to put a red textarea on the bottom of the page:


<div class="footer">
<textarea rows=1></textarea>


.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0;
textarea {
background-color: red;
border: none;
padding: 0;
height: 30px;

On latest FireFox, the textarea is correctly on the bottom.

But on latest Chrome and latest Safari, there's a gap between the bottom border and the textarea.

How to remove this gap on Chrome and Safari?


That's because the textarea is displayed as an inline element. So, the way it's height is calculated is not as you would expect from a block element.

This will solve your issue:

textarea { display: block; }

Also, this way you guarantee that both your textarea and your container have the same height. Cheers.