html中input的text类型和button类型不一致问题

css：

 

input{
    width: 300px;
    height: 40px;
    font-size: 20px;
}

 

html：

          <div>
          <span>{{title}}</span>
          <input v-bind:type="input_type"
                 v-bind:placeholder="input_placeholder"
                 v-bind:value="input_text"
                 />
          </div>

显示效果：

这里明显button类型的input的width要短上一小点！

解决：在input框添加样式 （不是单独在类型为text或者button的input上加，所有input都加上）

box-sizing: border-box;

效果：

 

参考博主：https://blog.csdn.net/weixin_62042254/article/details/121905450