Menu
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.
619
If we want to apply only right padding to an element, then we have to use only padding-right property in the id selector. And, then we have to set only one value to the property as shown in the following example: <! Doctype Html>
How to Add Padding in CSS. Like with margins, padding has four sides to be declared: top, right, bottom, and left. To set padding on all sides, use the shorthand property padding. To set padding for a specific side, use the padding-top, padding-right, padding-bottom, and padding-left properties.
To add space inside a form's text field, use the CSS padding property.
You can eliminate this extra padding by changing the box-sizing of the input.
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
It makes the modern browsers behave the same. You might need to target IE specifically.
117
I experimented by changing your line-height and font-size values to 20px and then inspecting the element with Firebug. The clientHeight and offsetHeight properties are both 24px (but since those properties include any padding set on the element I'm not sure if this is the browser expanding the element height, or adding padding).
Explicitly setting the height of the input to be the same as the line-height seems to do what you want, i.e. line-height: 16pt; height: 16pt; - but I suspect it works by clipping the element, as the vertical position of the text within the input doesn't change.
3
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
