CODEWITHSUNDEEP
css
acemtp
acemtp

Reputation: 3019

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:

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, 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?

Upvotes: 1

Views: 686

Answers (2)

Cthulhu
Cthulhu

Reputation: 5235

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.

Upvotes: 6

j08691
j08691

Reputation: 207861

Add vertical-align: bottom to your textarea CSS:

textarea {
    background-color: red;
    border: none;
    padding: 0;
    margin:0;
    height: 30px;
    vertical-align:bottom;
}


.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;
  vertical-align: bottom;
}
<div class="footer">
  <textarea id="id" class="talkus-input-textarea" rows=1></textarea>
</div>

Upvotes: 2

Related Questions