Question

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.

Answer 1

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.

Answer 2

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.

友情链接