border-box of input not working as expected

user_12421905 0
Viewed 577

When I set border-box to input without a specific height and width, padding increases the width of the input. On the other hand, if I do the same, but with a established size, then it works as normal as on a regular div, setting the padding without changing the width of the input.

Short snippet

#input1 {
  box-sizing: border-box;
  padding: 0 10px;
}

#input2 {
  width: 200px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  input1: <input type="text" name="text" id="input1"> <br/><br/>
  input2: <input type="text" name="text" id="input2">
</body>
</html>

css html
1 Answers

From the specification:

Note: In contrast to the length and percentage values, the auto value of the width and height properties (as well as other keyword values introduced by later specifications, unless otherwise specified) is not influenced by the box-sizing property, and always sets the size of the content box.

In your first example you didn't set any width so it's auto and box-sizing with do nothing (content-box will behave the same way as border-box). Padding and borders will logically increase the overall size.

user_86203330
Related