HTML 5 Doctype Textfield larger than given width

38 views Asked by At

When I use <!DOCTYPE html> my textfield is larger (about 257px instead of 250px). Does anyone have any idea why this would be? I couldn't find anything online.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>

    <body>
        <form>
            <input type='text' style="width:250px">
            <div style='width:250px;background-color:#00FF00'>&nbsp;</div>
        </form>
    </body>
</html>

Thanks in advance!

2

There are 2 answers

0
Arshiya Khanam On BEST ANSWER

Try this one

.inp {
  box-sizing:border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'>&nbsp;</div>

</form>
</body>
</html>

0
Lau Bloch Rasmussen On

That is the browsers default styling, from chrome dev:

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

So border takes 2*2px and padding taking 2*1px equal to 256px