CSS margin 属性的使用方法
CSS 中的 margin 属性用于设置元素周围的外部间距（即外边距）。这个属性可以单独应用于元素的顶部、右侧、底部和左侧，也可以一次性应用相同的值到所有四个方向。通过调整外边距，你可以控制元素之间的空间布局。
基本语法
selector { margin: value; }- selector 是你要应用样式的 HTML 元素的选择器。
- value 可以是以下形式之一：
- 单一值：应用到所有四个方向（上、右、下、左）的相同外边距。
- 两个值：第一个值应用到垂直方向（上和下），第二个值应用到水平方向（左和右）。
- 三个值：第一个值应用到上方，第二个值应用到水平方向（左和右），第三个值应用到下方。
- 四个值：依次应用到上、右、下、左四个方向。
值类型
长度单位：如像素（px）、百分比（%）等。
margin: 20px; /* 所有方向的外边距为 20 像素 */ margin: 10% 5%; /* 上下外边距为父容器高度的 10%，左右为 5% */自动（auto）：常用于水平居中对齐块级元素。
margin: 0 auto; /* 水平居中，上下外边距为 0 */预定义值：
- none: 无外边距。
- inherit: 从父元素继承外边距值。
使用示例
单一值：
p { margin: 20px; /* 所有方向的外边距都是 20 像素 */ }两个值：
div { margin: 10px 20px; /* 上下外边距为 10 像素，左右为 20 像素 */ }三个值：
section { margin: 10px 20px 30px; /* 上边距为 10 像素，左右为 20 像素，下边距为 30 像素 */ }四个值：
img { margin: 10px 20px 30px 40px; /* 上边距为 10 像素，右边距为 20 像素，下边距为 30 像素，左边距为 40 像素 */ }使用自动实现水平居中：
.container { width: 60%; margin: 0 auto; /* 块级元素水平居中 */ }
注意事项
- 外边距是透明的，不会显示任何颜色或背景。
- 外边距可能会合并（称为“外边距折叠”），特别是在相邻的块级元素之间。
- 使用百分比值时，它是相对于包含块的宽度计算的（对于 top 和 bottom 也是如此，尽管这看起来有些不直观）。
掌握 margin 属性的使用方法是进行网页布局的基础，它可以帮助你精确地控制页面上的元素位置和间距。
