Posted under CSS
Permalink
Tags Bug, CSS, Gotcha, HTML, inline-block, Tip, Tutorial
Chrome places an unwanted 4px bottom margin on a textarea, which is impossible to elminate purely by the margin settings.
In addition, the other browsers sometimes have related issues.
This post on StackOverflow discusses the issue, and the Chrome bug issue may be found here.
Issues like this can be caused in inline and inline-block elements, due to side effects of the line height/vertical alignment of textual elements. They can be hard issues to diagnose as the cause of the extra margin is not readily visible in tools like Firebug or Chrome’s developer tools/debugger. In order to see it, I added an extra div with a border around the element, and the margin was then clearly visible, but of course it was still not reported as a margin on the textarea element, which steadfastly maintained its story that no margin was present!
As per the StackOverflow article, there are 2 ways around this issue:-
- If the textarea is set to have vertical-align:top then this eliminates the problem. It also has the advantage of maintaining the element as inline-block – in Chrome’s case this is the default, and with other browsers this will often be used in order to allow margins etc. which an inline element will not allow.
- Another fix for the problem is to set the textarea to display:block, i.e. to make it a block element. This is fine, but it should be noted that as the element is not natively a block type element, IE7 and earlier IE versions will not handle this. IE8 and IE9 will allow an inline element to be redesignated as a block one. Therefore, the first method has better browser compatibility.
Leave a Reply
You must be logged in to post a comment.