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.
The width and height properties include the content, but does not include the padding, border, or margin.
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.
Just use non-breakable spaces: instead of regular spaces.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With