内边距

在一般情况下,你说的都是对的,因为按css2.1的标准,block元素的宽(width)和高(height)是指元素实际内容(不包括内边距和边框的宽度)的宽和高,因此如果加了padding或border,整个盒子的尺寸就会被撑大。
但是,css3增加了一个盒子属性叫box-sizing,它的值如果是“content-box”,就是以内容(content)为盒子的范围,这个跟css2.1的标准是一样的,而如果是“border-box”,就是以边框(border)为盒子的范围,这也就是说,在这种情况下,width=内容的width+padding+border,如果width的值固定,增加padding或border宽度,则内容的宽度就会自动缩小,而整个盒子的外观尺寸是不会变化的(这个就跟低版本的IE因为没有符合css2.1标准而歪打正着的盒子效果是差不多的,但IE的不包括border)。但是当padding大于width时,盒子的尺寸仍然会被撑破的,这也就是“对于block元素,padding值设置大于盒子宽度,一定会影响元素尺寸”这个说法的由来。

发布了13 篇原创文章 · 获赞 0 · 访问量 305

猜你喜欢

转载自blog.csdn.net/q314050231/article/details/103490368