Input width with type submit less than input with type text

Question

I don\'t understand why input width with type submit less than input with type text. Could you help me with it?

HTML:

             


        
                      

              相关标签:
       
      

Answer 1

The two input types have their own default styling (margin, padding etc). In order to include these 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 box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

Answer 2

Demo

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

css

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