web margin属性

CSS 的 `margin` 属性用于控制元素的外边距，即元素边框外的空间。以下是其核心知识点和用法：

1. 基本用法

css

margin: 10px; / 上下左右均为 10px /

margin: 10px 20px; / 上下 10px，左右 20px /

margin: 10px 20px 30px;/ 上 10px，左右 20px，下 30px /

margin: 10px 20px 30px 40px; / 上、右、下、左（顺时针） /

css

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

2. 值类型

3. 关键特性

水平居中

css

block {

width: 80%;

margin: 0 auto; / 左右外边距自动分配，元素水平居中 /

外边距合并（Margin Collapse）

负外边距

css

box {

margin-left: -10px; / 向左移动 10px /

4. 特殊场景

5. 注意事项

代码示例

css

/ 水平垂直居中（绝对定位） /

centered {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width: 200px;

height: 100px;

/ 防止外边距合并 /

parent {

overflow: hidden; / 触发 BFC /

child {

margin: 20px 0;

掌握 `margin` 的外边距控制、合并机制及 `auto` 的应用，能更精准实现布局效果，同时避免常见问题。