Why are button, input vs div, a have different width result?

Question

Here is the js bin http://jsbin.com/ojiJEKa/1/edit

Sorry for my stupid question, but, why <div> & <a> have different width result with <input> & <button>? Even they have same style

How to make them equal?

Answer 1

The button and input element have a box-sizing set to border-box by default. This mean the padding and border are bounded inside the defined width.

That is not the base with the a and div elements, has they have normal box-sizing property. This mean padding and border are added extra on top of the width.

To make them all the same, normalize the box-sizing css property.

Answer 2

input and button have different box model, you can add "box-sizing:content-box" to them to reset the box model.