textarea chrome width height

Question

I use the following HTML:

<textarea></textarea>

And the following CSS:

textarea{ display: block; margin: 0px; padding: 0px; border: 0px; outline: 0px; width: 100px; height: 100px; resize: none; }

Firefox, Safari give me just what I expected a textarea of 100 x 100, but Chrome 111 x 111 (even the Chrome inspector displays 100x100).

Here is an screenshot I took: http://afbeelding.im/GF5f3d

Derek 朕會功夫 · Accepted Answer · 2012-05-10 00:33:26Z

Confused over padding and margin stuff? box-sizing is here!

box-sizing can make sure the element's size is the exact same size of what you set, no matter what padding or margin, it is still the same.

box-sizing: border-box; //This will make your life much easier.

1 Answer 1