Width of input with type submit is less than input with type text

Question

I do not understand why the width of input with type submit is less than input with type text. could you help me?

HTML:

<div class="test"> <input type="text" placeholder="test" /> </div> <div class="test"> <input type="text" placeholder="test" /> </div> <div class="test"> <input type="submit" value="test" /> </div> 

CSS

 input { width: 200px; } 

http://jsfiddle.net/dve2h1dt/

Thanks in advance.

Answer 1

Two input types have their own default style (margin, padding, etc.). To include them in the width calculation to normalize the set width, use box-sizing:border-box;

Change your CSS to:

 input { width: 200px; box-sizing:border-box; } 

More on box-sizing from MDN

The CSS property for determining the size of the box is used to change the default CSS model. It is used to calculate the width and height of elements.

Answer 2

Demo

The box model used is different for both inputs, you can make the box models the same by specifying their box-sizing

CSS

 input { width: 200px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }