上查看所有课程
CSS margin 属性在元素周围添加空间。它在元素的边框外部创建一个空白区域。例如，
h1 {
border: 4px solid black;
margin: 50px;
}浏览器输出
在此，margin 属性在 h1 元素边框周围添加了 50px 的空间。
CSS margin 语法
margin 属性的语法如下：
margin: auto | length | percentage | inherit;这里，
auto：浏览器自动计算 marginlength：以长度单位定义 margin，例如px、pt、em等percentage：以百分比 (%) 定义 margininherit：从父元素继承值
margin 属性的默认值是 **0**。
注意：margin 属性接受负值，从而减小指定方向的 margin 空间。
示例 1：CSS margin 属性
让我们看一个 margin 属性的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p class="margin">This paragraph has a margin of 60px.</p>
<p>This is a normal paragraph.</p>
</body>
</html>p {
border: 4px solid black;
}
p.margin {
margin: 60px;
}浏览器输出
示例 2：CSS margin 属性
百分比值相对于父元素的大小。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p>This paragraph has a margin of 5%.</p>
<div>
<p>This paragraph has a margin of 5%.</p>
</div>
</body>
</html>p {
margin: 5%;
border: 4px solid black;
}
div {
width: 400px;
height: 100px;
border: 2px solid black;
}浏览器输出
在上面的例子中，即使具有相同的 5% margin，两个段落的 margin 空间也不同。这是因为 percentage 值相对于父元素的大小。
第一个段落的 margin 相对于 body 元素的大小，而第二个段落的 margin 相对于 div 元素的大小。
因此，相同的 margin 会为两个段落产生不同的空间。
CSS margin 的组成属性
margin 属性包含以下 CSS 属性，用于指定元素各个边的 margin。
margin-top：在顶部添加 marginmargin-right：在右侧添加 marginmargin-bottom：在底部添加 marginmargin-left：在左侧添加 margin
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p>
This paragraph has a margin of 30px at the top, 80px at the right,
25px at the bottom, and 60px at the left.
</p>
</body>
</html>p {
border: 4px solid black;
margin-top: 30px;
margin-right: 80px;
margin-bottom: 25px;
margin-left: 40px;
}浏览器输出
CSS margin 作为简写属性
margin 属性可用作简写属性，用于指定元素一到四个边的 margin。例如，
margin: 10px; /* applies to all sides */
margin: 20px 40px; /* applies 20px to top & bottom, and 40px to left & right */
margin: 20px 40px 60px; /* applies 20px to top, 40px to left & right, and 60px to bottom */
margin: 10px 20px 30px 40px; /* applies to top, right, bottom, and left respectively */让我们看一个完整的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<h2>margin: 30px 60px 80px 20px</h2>
<p>
The margin in the above heading follows order as top (30px), right
(60px), bottom (80px), and left (20px).
</p>
</body>
</html>h2 {
/* applies top, right, bottom, and left respectively */
margin: 40px 60px 80px 30px;
background-color: orange;
}浏览器输出
了解更多关于 CSS Margin 的信息
块级元素的相邻垂直 margin 会折叠成一个 margin。
在此，相邻垂直 margin 指的是两个相邻块级元素（例如 <div> 或 <p> 标签）之间的 margin，它们在垂直方向上一个接一个地排列。
假设我们有两个块级元素，A 紧随其下是 B，其中 A 的 margin 为 40px，B 的 margin 为 20px。那么 A 和 B 之间的垂直 margin 会折叠成一个 40px 的 margin。
折叠后 margin 的大小等于它们之间 margin 的最大值。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p class="first">This paragraph has a margin of 40px for all sides.</p>
<p class="second">This paragraph has a margin of 20px for all sides.</p>
</body>
</html>p.first {
margin: 40px;
}
p.second {
margin: 20px;
}
p {
border: 4px solid black;
} 浏览器输出
在上面的例子中，两个段落之间应用了 40px 和 20px 的 margin。两个垂直相邻的 margin 都折叠了，导致它们之间有 40px 的 margin。
注意：margin 折叠仅发生在顶部和底部 margin，不发生在左侧和右侧 margin。
Inline 元素对其顶部和底部 margin 没有影响。这是因为 inline 元素遵循文本的自然流，而应用顶部和底部 margin 会破坏这种流并导致布局不一致。
例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p>
This <span>span</span> element does not have any effect on the top
and bottom margins.
</p>
</body>
</html>span {
/* adds 30px margin */
margin: 30px;
border: 2px solid black;
background-color: greenyellow;
}
p {
border: 4px solid black;
}浏览器输出
在上面的例子中，只应用了左侧和右侧的 margin，忽略了顶部和底部的 margin。
我们可以通过将 display 属性更改为 inline-block 或 block 来为 inline 元素添加 margin。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS margin</title>
</head>
<body>
<p>
This <span>span</span> element have top and bottom margins.
</p>
</body>
</html>span {
margin: 30px;
display: inline-block;
border: 2px solid black;
background-color: greenyellow;
}
p {
border: 4px solid black;
}浏览器输出
在此，margin 属性应用于 inline 元素的所有四个边。