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 :)

Answer 1

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

Answer 2

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