Reputation: 229
I don't understand why input width with type submit less than input with type text. Could you help me with it?
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;
}
Thanks in advance.
Upvotes: 5
Views: 768
Reputation: 11496
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;
}
Upvotes: 1
Reputation: 71240
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;
}
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.
Upvotes: 8