Inconsistent box model between <input type=“submit”/> and <input type=“text” />

Question

I realised that has a border-box box model, whereas has a content-bo

Answer 1

You have two options to solve this problem 1)if you write css code for input,it applies for every input element.Instead of using this for evert one of them,just do for specific types

input[type="submit"],input[type="text"]
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

2)I always use class declarations after I reset known tag names.

.MySubmit
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

and use it like

I hope this helps.