It seems that every browser adds some magic hardcoded padding inside <input type="text">. Some browsers (IE, Safari, Chrome) make the input box a bit taller, but they properly top align as if it was a regular HTML element. I can live with the extra height. But some browsers misbehave (Firefox and Opera) and also try to either vertically align the text or add some extra padding above it. I'm surprised that modern browsers don't allow to layout textboxes as if they the same way as HTML and add some magic formatting. Am I doing something wrong? Am I missing some trick? Are they some proprietary CSS properties which could help me? I briefly looked at Firefox CSS documentation, but I could not find any. Alternatively, I could use editable HTML instead of <input type="text">.
Here is a snippet which demonstrates the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body, input {
font-family: sans-serif;
font-size: 16pt;
color: White; }
#textbox {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
background-color: #A5C9E2;
line-height: 16pt;
padding: 0px;
margin: 0px;
border-width: 0px; }
#box {
position: absolute;
left: 120px;
top: 20px;
width: 100px;
background-color: #AFD66A;
line-height: 16pt; }
</style>
</head>
<body>
<input type="text" id="textbox" value="Hello">
<div id="box">Hello</div>
</body>
</html>
Edit: I experimented a bit with -moz-outline and -moz-box-sizing in Firefox (just in case), but none of their values removes the extra padding.