前端三剑客
CSS

CSS margin(外边距)

# CSS Margin（外边距）

# 1. Margin 基础

margin 清除元素周围（外边框）区域。margin 没有背景颜色，是完全透明的。它可以单独设置元素的上、下、左、右边距，也可以一次性改变所有的属性。

# 2. 可能的值

auto：浏览器会根据元素情况自动计算外边距。
length：指定固定的外边距长度，可以是 px, pt, cm, 等单位。
%：外边距的百分比，基于包含块的宽度计算。
inherit：规定应该从父元素继承 margin 属性的值。

Remark 注意: Margin 可以使用负值，从而导致内容重叠。

# 3. Margin - 单边外边距属性

在CSS中，可以为不同的侧面指定不同的边距：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.margin {
    margin-top: 100px; /* 顶部外边距 */
    margin-bottom: 100px; /* 底部外边距 */
    margin-right: 50px; /* 右侧外边距 */
    margin-left: 50px; /* 左侧外边距 */
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 4. Margin - 简写属性

为了简化代码，可以使用一个属性指定所有边距。这称为简写属性。

所有边距属性的简写属性是 margin：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.margin {
    margin: 100px 50px; /* 上下边距为100px，左右边距为50px */
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 5. Margin 简写属性的使用方法

margin 属性可以有一到四个值：

margin: 25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin: 25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin: 25px 50px;
- 上下边距为25px
- 左右边距为50px
margin: 25px;
- 所有的4个边距都是25px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.margin1 {
    margin: 25px 50px 75px 100px; /* 四个边距不同 */
}
p.margin2 {
    margin: 25px 50px 75px; /* 上、左/右、下 */
}
p.margin3 {
    margin: 25px 50px; /* 上/下、左/右 */
}
p.margin4 {
    margin: 25px; /* 四个边距相同 */
}
</style>
</head>
<body>
<p class="margin1">四个边距不同。</p>
<p class="margin2">上、左右、下。</p>
<p class="margin3">上下、左右。</p>
<p class="margin4">四个边距相同。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 6. Margin 的自动对齐

使用 margin: auto; 可以让块级元素水平居中。这在固定宽度的元素中非常有用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div {
    width: 300px; /* 元素的宽度 */
    margin: auto; /* 自动水平居中 */
    background-color: lightblue; /* 设置背景颜色 */
}
</style>
</head>
<body>
<div>这个 div 元素将水平居中。</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 7. Margin 的负值

margin 属性可以使用负值，这将导致元素向相反方向移动。负值 margin 可以用于创建一些有趣的布局效果，但在使用时需要小心。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p {
    background-color: yellow; /* 设置背景颜色 */
}
p.negative {
    margin-left: -50px; /* 左边距负值 */
}
</style>
</head>
<body>
<p>这是一个普通段落。</p>
<p class="negative">这个段落的左边距是负值，向左移动了50px。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 8. 所有的CSS边距属性

通过对 margin 属性的掌握，你可以更灵活地控制元素间的距离和布局方式。

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS 轮廓样式设置 CSS padding（填充）→