What is the minimum height of a textarea in CSS

Question

I tried it in different browsers,but it seems to be not working.If I change the number(min-height),then beyond 50 it works and below 50 with any range of values it stays at the same height.So,is there any way to keep min-height of a textarea below 50,say at 10px?

<textarea style="width:700px;resize:none;min-height:10px;"></textarea>
<textarea style="width:700px;resize:none;height:10px;"></textarea>

Answer 1

That is related with the default value of the attribute rows in the text area! The default is 2 according to http://www.w3schools.com/tags/att_textarea_rows.asp.

So try to change it to 1 an play with the height attribute a little.

If you want your textarea even littler that 1 row size, then adjust your text area style in css "line-height".

Answer 2

The min-height property sets the minimum height of an element, as its name suggest. This means a height that is used unless nothing requires a larger height. For a textarea element, the default height is determined by the number of rows (specified by the rows attribute, which is defaulted to 2 by browser practice and by HTML5 CR) and by browsers’ calculation of line height.

Thus, you can set min-height even to 10px, and it works as defined – the actual height is larger, but that follows from the definition.

To set the height, you would use the height property, as in your example, and/or the rows attribute, which indirectly sets the height. As usual, it sets the content height. The total height of a textarea box is content height plus top padding plus bottom padding plus top border plus bottom border.

It is difficult to imagine a situation where it would make sense to set textarea height to 10px, which is not enough for even one line of text in a size that is legible to most human beings. Moreover, if you really want to have an input box that is one line tall and is not resizable, an input type=text element would be a much more practical and much more logical choice than textarea.