- `padding-top`、`padding-right`、`padding-bottom`、`padding-left`: 分别设置上、右、下、左四个方向的内边距。

- `padding`: 设置上、右、下、左四个方向的内边距，可以使用一个、两个或四个值来设置。

- `margin-top`、`margin-right`、`margin-bottom`、`margin-left`: 分别设置上、右、下、左四个方向的外边距。

- `margin`: 设置上、右、下、左四个方向的外边距，可以使用一个、两个或四个值来设置。- `padding: auto`: 自动计算内边距，使元素居中。- `margin: auto`: 自动计算外边距，使元素居中。

- `box-sizing: border-box`: 设置盒模型为边框盒模型，即元素的宽度和高度包括内边距和边框，不包括外边距。

- `box-sizing: content-box`: 设置盒模型为内容盒模型，即元素的宽度和高度只包括内容，不包括内边距、边框和外边距。

以下展示了 `padding` 和 `margin` 属性的多种用法：

div { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;}

span { padding: 10px 20px;}

p { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}

a { margin: 10px 20px;}

.center { padding: auto; margin: auto; width: 200px; height: 100px; background-color: #ccc;}

.box { box-sizing: border-box; width: 200px; height: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px;}

.content { box-sizing: content-box; width: 200px; height: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px;}