输入从哪里获得额外的宽度？

Question

I am trying to create a button div and input to all be 80% the width of their container.

However the input is always bigger than 80%. Why is this? Do I need to use calc in some way to get it to 80%.

Even when setting the padding to 0px it is still bigger:

https://jsfiddle.net/0rcv1ypb/

<input/>
<button></button>
<div></div>


input{
  display: block;
  width: 80%;
}
button{
  display: block;
  width: 80%;
  height: 20px;
}
div{
  width: 80%;
  height: 20px;
  background: black;
}

As a side question: the default width for input appears to be 145px. Where does this value come from as it is not in the agent style sheet.

Answer 1

Because the default browser styling is box-sizing: content-box .

Reset it and all elements get the same width as expected, even with different paddings/borders.

 * { box-sizing: border-box; } input{ display: block; width: 80%; } button{ display: block; width: 80%; height: 20px; } div{ width: 80%; height: 20px; background: black; }

 <input/> <button></button> <div></div>

Take a look at the box-model and here .