Extra padding under text area

Question

My text area has extra padding under it but I cant seem to find the source of it. I have put the individual code on this page:

http://jsfiddle.net/wfuks/

I cant seem to find the source of it. It has class "field":

.field { background-color: white; width: 430px; padding: 10px; font-family:arial, sans-serif; border: 1px solid #CCC; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

Any input (pun) would be appreciated :)

If you formatted and organised your css better, this sort of thing would be easier to spot. — Asad Saeeduddin, Oct 31 '12 at 10:04
Do you want to remove the padding under the text area, or inside the text area? — Shiridish, Oct 31 '12 at 10:12
I am talking about the fact that the space between the input box and the gray container box is bigger at the bottom than on the top. — Jimmy, Oct 31 '12 at 10:13
possible duplicate of [Extra space under textarea, differs along browsers](http://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers) — Michael Benjamin, Sep 07 '15 at 14:17

René · Accepted Answer · 2017-12-23T11:42:01.833

To have cross browser no white space below textarea/input fields use:

textarea,
input,
select {
  margin: 0;
  vertical-align: bottom;
}

(tested in your fiddle, works)

Oddly the vertical align is the key here.

Just a note, you don't need the margin:0 because you already have *{margin:0}. For an even more complete cross browser experience for textarea you could also use overflow:auto; for IE and resize:none; for browsers with resizing support.

Some more info about why it works like it works: Mystery white space underneath image tag

Sowmya · Answer 2 · 2012-10-31T11:06:27.803

1

Add overflow:auto to .field_box and float:right to textarea

DEMO

In your code there is float:left to label, in that case the right element should have the right floating to fill the exact space available. otherwise you can remove floats and achieve this by using display:table-row and table-cell

And yes even vertical-align: bottom works.

DEMO 2

edited Oct 31 '12 at 11:06

answered Oct 31 '12 at 10:13

Sowmya

26,684
21
96
136

+1 This solution works. A little explanation would be good :) – Shiridish Oct 31 '12 at 10:38
My solution works as well and is in my opinion much more subtle and has less(no) chance of breaking anything else in the page. About why floats work: floats have the habit of becoming a block element with a special set of rules. In this case setting it to `display:block` works as well. It's just ugly. And display:block works because block elements don't have white space from line-height like inline elements have. In a nutshell, it's the long way around. – René Oct 31 '12 at 10:48
Sorry for long comments: I'm not saying you shouldn't use any float here. It's just not the best general purpose solution for removing the added white space on the bottom of a textarea. – René Oct 31 '12 at 10:50

score 0 · Answer 3 · answered Oct 31 '12 at 10:17

0

To my understanding you mean the padding in the div class= 'field_box'. Make the padding to 0px in this class to remove the space under text area.

If you mean the padding in the text area: make padding= 0px in class .field

answered Oct 31 '12 at 10:17

Shiridish

4,942
5
33
64

It should be 4px all the way around but it is more at the bottom. I want it to be 4px at the bottom not more. – Jimmy Oct 31 '12 at 10:21
yes in chrome I find the difference. However Mozilla shows it correctly – Shiridish Oct 31 '12 at 10:25

Extra padding under text area

3 Answers3

Related