16、CSS 盒子模型与元素定位全解析

CSS 盒子模型与元素定位全解析

1. 元素内边距（Padding）

元素的内边距是指元素内容与边框之间的空间。可以使用 padding 属性来设置内边距，可接受的值包括长度（通常是 em 或 px 单位）或百分比值。

设置内边距有两种方式：
- 使用快捷属性 ：可以通过快捷属性一次性设置元素四个边的内边距，顺序是从上开始，按顺时针方向，即上、右、下、左。例如：

div #top { margin: 5px 0 10px 0; }

上述代码定义了顶部 5 像素的空间，左右无外边距，底部 10 像素的外边距。
- 使用子属性 ：也可以通过 -left 、 -right 、 -top 和 -bottom 子属性分别定义各个边的内边距。例如：

img .leftside { padding-left: 10px; padding-right: 0px; }
img .rightside { padding-left: 0px; padding-right: 10px; }

元素盒子的宽度是内容宽度加上左右外边距、边框和内边距的总和；高度是内容高度加上上下外边距、边框和内边距的总和。