css - 在input和div中使用相同的width和padding样式，长度呈现出差异

问题描述

问 题

css代码如下：

input,div{
    width:220px;
    padding:6px 4px;
    font-size:14px;
    background:#ccc;
    border:none;
    display: block;
    margin-top:10px;
}

html代码如下：

<input type="text"/>
<div></div>

结果input的长度为220px,div长度为228px。测试采用google浏览器，请教产生差异的原因

解决方案

应该是box-sizing的问题。
input的box-sizing默认是border-box, width除了content还包括padding。加了padding只会让content变小。
div的box-sizing默认是content-box，加了padding之后content不变，于是div比input多了两边padding(4px也就是)8px的长度。

具体默认box-sizing好像ie会有不同，只要设置统一的box-sizing就好了。

这篇关于css - 在input和div中使用相同的width和padding样式，长度呈现出差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！