盒子模型(内边距的设置)
- 所有元素都可以设置内边距
- 属性和外边距属性大体相同,可参考上一篇,但有区别
- 内边距不能设置为负值
- padding-方向:尺寸
- 注意:使用内边距padding之后元素整体会变大,因为他是直接加上了内边距的大小,不改变元素本身的大小,因此可能会导致页面变形(正常情况下,内边距和边框是在元素设置的宽度和高度之外进行绘制)
- 若想让padding元素改为在设置的宽度和高度之内进行设置,需要修改一个属性
box-sizing: border-box;
;其默认值为box-sizing: content-box;
即在之外绘制 - 元素最终的宽度=左边框+右边框+左内边距+右内边距+元素内容宽度
- 元素最终的高度=上边框+下边框+上内边距+下内边距+元素内容高度
- 对某些浏览器可能不支持box-sizing属性的设置:(同时写上,若不支持,则自动选择适合的属性值)
//火狐浏览器专有属性
-moz-box-sizing: border-box;
//webkit内核浏览器
-webkit-box-sizing: border-box;
box-sizing: border-box;