Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extra padding in <input type="text">

Tags:

html

css

padding

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.

like image 619
Jan Zich Avatar asked Dec 04 '09 11:12

Jan Zich


People also ask

How do you add padding to a text box in HTML?

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 do you add padding and margin in CSS?

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.

How do you put space between label and textbox in HTML?

To add space inside a form's text field, use the CSS padding property.


2 Answers

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.

like image 117
jessebeach Avatar answered Oct 31 '22 23:10

jessebeach


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.

like image 3
Will Prescott Avatar answered Nov 01 '22 00:11

Will Prescott