在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为content-box，大小即可跟div一样。

---

我在google里测试的宽度都是228px，只是input里面可输入区域的宽度为220px，产生的原因是你设置了padding:6px 4px。可将padding设置为6px 0 可达到宽度相同

---

div 和input首先是不同的元素类型， div是block， 而input属于inline.另外这个inline又分了两种类型。如果你这段代码拿到不同的浏览器下，会表现出差异的，所以通常我们会使用reset.css.

---

---

应该是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就好了。