往往你设置的元素宽度,是内容content的宽度,没有算上padding,border,margin的宽度的,如下
谷歌调试:
元素的总宽度就是margin+border+padding+content
所以如果两个元素设置一样的高度宽度,padding不一样,这两个元素的大小也是不同的。
举栗子:
粗问题了,那我想fancy的内容距离边框远一点,但是总宽度和simple的一样,又懒得算要设置多大,用到CSS3的box-sizing,效果如下:
新simple,新fancy设置的宽度为500,该宽度是内容+border的宽度+padding的宽度。
有了box-sizing,就不用算啦。
我懒,所以以后的代码是
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
就不用再去重复写了,美滋滋。