CSS Margin 属性
CSS margin 属性在元素周围添加空间。它在元素的边框外部创建一个空白区域。例如，
h1 {
border: 4px solid black;
margin: 50px;
}
浏览器输出
在此，margin 属性在 h1 元素边框周围添加了 50px 的空间。
CSS margin 语法
margin 属性的语法如下：
margin: auto | length | percentage | inherit;
这里，
auto：浏览器自动计算 margin
length：以长度单位定义 margin，例如 px、pt、em 等
percentage：以百分比 (%) 定义 margin
inherit：从父元素继承值
margin 属性的默认值是 **0**。
注意：margin 属性接受负值，从而减小指定方向的 margin 空间。
示例 1：CSS margin 属性
让我们看一个 margin 属性的例子：
HTML
CSS
This paragraph has a margin of 60px.
This is a normal paragraph.
p {
border: 4px solid black;
}
p.margin {
margin: 60px;
}
浏览器输出
示例 2：CSS margin 属性
百分比值相对于父元素的大小。例如，
HTML
CSS
This paragraph has a margin of 5%.
This paragraph has a margin of 5%.
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：在顶部添加 margin
margin-right：在右侧添加 margin
margin-bottom：在底部添加 margin
margin-left：在左侧添加 margin
让我们看一个例子。
HTML
CSS
This paragraph has a margin of 30px at the top, 80px at the right,
25px at the bottom, and 60px at the left.
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 */
让我们看一个完整的例子。
HTML
CSS
margin: 30px 60px 80px 20px
The margin in the above heading follows order as top (30px), right
(60px), bottom (80px), and left (20px).
h2 {
/* applies top, right, bottom, and left respectively */
margin: 40px 60px 80px 30px;
background-color: orange;
}
浏览器输出
了解更多关于 CSS Margin 的信息CSS Margin 折叠块级元素的相邻垂直 margin 会折叠成一个 margin。
在此，相邻垂直 margin 指的是两个相邻块级元素（例如
标签）之间的 margin，它们在垂直方向上一个接一个地排列。
假设我们有两个块级元素，A 紧随其下是 B，其中 A 的 margin 为 40px，B 的 margin 为 20px。那么 A 和 B 之间的垂直 margin 会折叠成一个 40px 的 margin。
折叠后 margin 的大小等于它们之间 margin 的最大值。
让我们看一个例子，
HTML
CSS
This paragraph has a margin of 40px for all sides.
This paragraph has a margin of 20px for all sides.
p.first {
margin: 40px;
}
p.second {
margin: 20px;
}
p {
border: 4px solid black;
}
浏览器输出
在上面的例子中，两个段落之间应用了 40px 和 20px 的 margin。两个垂直相邻的 margin 都折叠了，导致它们之间有 40px 的 margin。
注意：margin 折叠仅发生在顶部和底部 margin，不发生在左侧和右侧 margin。
Inline 元素的 MarginInline 元素对其顶部和底部 margin 没有影响。这是因为 inline 元素遵循文本的自然流，而应用顶部和底部 margin 会破坏这种流并导致布局不一致。
例如，
HTML
CSS
This span element does not have any effect on the top
and bottom margins.
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。例如，
HTML
CSS
This span element have top and bottom margins.
span {
margin: 30px;
display: inline-block;
border: 2px solid black;
background-color: greenyellow;
}
p {
border: 4px solid black;
}
浏览器输出
在此，margin 属性应用于 inline 元素的所有四个边。