Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Padding-bottom for textarea isn't considered

Tags:

html

css

forms

When I set a padding to a textarea, it works okay on the first look. But when I type content that goes beyond the textarea height (when you start seeing the scroller) the padding-bottom ceases to exist. Is there a way to fix this? It seems to be a default behavior. You can see a very basic example here: http://jsfiddle.net/corinne/LKkky/ PS. Browser used is Chrome. PS2. Just tried with Firefox and actually the padding stays.

like image 815
Corinne Avatar asked Oct 03 '12 13:10

Corinne


People also ask

Does padding count in height?

The width and height properties include the content, but does not include the padding, border, or margin.

Is padding included in the element?

Padding and Element Width The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element.

How do I add a space to a textarea?

Just use non-breakable spaces:   instead of regular spaces.

What is the use of padding tag?

An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.


1 Answers

Chrome, Safari and Internet Explorer render the textarea paddings differently to Firefox and Opera. Now which of them render the textareas incorrectly? That depends on what you are trying to achieve because in truth none of them render it wrongly, they all add padding it just comes down to how they interpretated the spec.

No CSS property will fix this 'issue' so the only way you can get around this 'problem' is to add a container element to the textarea and give that a padding instead.

like image 140
Matt Kieran Avatar answered Oct 14 '22 15:10

Matt Kieran