I am trying to do some quite precise styling on some form elements, and this issue is causing me a lot of grief.
If I try to remove padding
, margin
, border
and outline
from an <input>
(with display: block
) so that the size of the field is purely determined by the text, the input field ends up having a few pixels extra padding than any other block level element styled exactly the same way. Here's an example:
http://jsfiddle.net/nottrobin/b9zfa/
<input class="normalised testSubject" value="hello" />
<div class="normalised testSubject">hello</div>
Rendering:
In that example, the <div>
gets a computed height of 16px
while the <input>
gets a computed height of 19px
.
I get the same behaviour in Chrome 16, Firefox 9 and Opera 11 so it's clearly rendering engine independent.
I can fix the issue by manually adding a height, but I don't want to do that because I want the design to remain responsive.
Can anyone help me understand what's going on here, and how I can reliably make sure that the <input>
will be the same height as any block level element that follows it?