【 CSS 外边距属性 ( Margin )】

---

CSS 外边距属性

---

用于	属性名	CSS 版本
① 在一个声明中，一次性设置 所有外边距属性。 设置 元素的外边距 (可分别设置 四条边的外边距)。	margin	1
❶ 元素的 下外边距。属性值类型,同 margin 一致。	margin-bottom	1
❷ 元素的 左外边距。属性值类型,同 margin 一致。	margin-left	1
❸ 元素的 右外边距。属性值类型,同 margin 一致。	margin-right	1
❹ 元素的 上外边距。属性值类型,同 margin 一致。	margin-top	1

---

1. margin 属性: 设置 元素的外边距 (可分别设置 四条边的外边距)

• ⑴ 设置 元素的外边距: margin
  • 属性设置 元素的所有四个边外部的 外边距区域。
  • ① 简写属性: 在一个声明中，一次性设置 所有外边距属性,是以下子属性的简写。
    • (子属性 和 初始值都为 0)
    • ❶ 上外边距: margin-top: 0
    • ❷ 右外边距: margin-right: 0
    • ❸ 下外边距: margin-bottom: 0
    • ❹ 左外边距: margin-left: 0
    • 子属性的属性值: 单个值 = 长度值/百分比值/auto

---

• ⑵ 外边距 和 元素的类型
  • 非替换 内联 元素: 上下外边距 对 不可替换的内联元素 没有影响。
    • 如,<span> 和 <code>.

---

• ⑶ 内边距 padding 和 外边距 margin的区别
  • ① 位置不同: 有边框的话,以边框为界限,外边距在 边框的外部,内边距 在边框的内部.
    • 外边距 在元素周围 创建 额外的空间。
    • 相反，内边距 会在元素/内部 创建 额外的空间。
  • ② 界限: 内外边距中间: 一般是边框(如果设置了 边框的话)
  • 

­

---

• ⑷ 外边距的 语法
  • margin: [ <length> | <percentage> | auto ]{1,4};

/* 应用到四条边 Apply to all four sides */
margin: 1em;
margin: -3px;

/* 上下内边距 | 左右内边距 */
margin: 5% auto;

/* 上 | 左右 | 下 */
margin: 1em auto 2em; 

/* 上 top | 右 right | 下 bottom | 左 left */
margin: 2px 1em 0 auto;

/* 全局值 Global values */
margin: inherit;
margin: initial;
margin: unset;

---

• ⑸ 外边距的 取值
  • 个数: 1~4个
    • 可以使用一个、两个、三个或四个值 来指定 margin 属性。
    • 1个值:
      • 当指定一个值时，它对所有四个边 应用相同的 外边距。
    • 2个值:
      • 第一个边距: 应用于顶部和底部 = 上下 外边距
      • 第二个边距: 应用于左侧和右侧 = 左右 外边距。
    • 3个值:
      • 第一个边距: 应用于 顶部 = 上外边距
      • 第二个边距: 应用于 左侧和右侧 = 左右 外边距
      • 第三个边距: 应用于 底部 = 下外边距。
    • 4个值:
      • 边距 顺时针顺序: 分别 应用于 上外边距 → 右外边距 → 下外边距 → 左外边距 。
  • 每个值: 是 长度值/百分比值/ auto
    • <length>、<percentage> 或关键字 auto。
  • 负值: 与默认值相比，负值 使元素 更靠近它的邻居。

---

• ⑹ 外边距的 属性值
  • ① 各浏览器 默认值:auto
    • 浏览器 计算外边距。
    • 浏览器选择 要使用的 适当空白距离。
      • 元素居中: 左右 外边距都为auto时，可以 将元素居中。
        • 如果左右外边距的值 都是自动的，则计算的空间 是均匀分布 的。
      • p { margin: 10px auto;}
      • 
  • ② 长度值: length
    • 以具体单位计的 外边距值，比如 像素px、厘米 cm等。
    • 默认值是 0px。
    • 详情可查看: 【CSS 单位 (详细介绍)】
    • 设置固定值时
      • 右外边距 会接收未使用的水平空间的 一部分，这主要由 所使用的布局模式决定。(当 左右外边距之和 ≠ 父元素的 水平剩余空间)
  • ③ 百分比值(父元素/包含块): %
    • 基于 父元素的宽度 的百分比的 外边距。
    • 相对于 包含块的宽度。
  • ④ 继承父亲: inherit
    • 从父元素继承外边距。
  • 负值: 允许使用 负值。

---

• ⑺ 外边距的 浏览器支持
  • 在 quirks 模式下 不支持自动 auto 值。
  • 

---

• ⑻ 搭配属性 和 auto的计算值

display 的值	float的值	position的值	auto的计算值	Comment
inline, inline-block, inline-table	any	static or relative	0	内联 布局模式 (Inline layout mode)
block, inline, inline-block, block, table, inline-table, list-item, table-caption	any	static or relative	0, 除非同时将左右外边距设置为自动 auto。会将元素 置于其 父元素的中心。	块布局模式 ( Block layout )mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption	left or right	static or relative	0	块布局模式 (浮动元素)
any table- *, except table-caption	any	any	0	Internal table- * 元素 没有外边距, 使用 边框间距 border-spacing
any, except flex, inline-flex, or table-*	any	fixed or absolute	0, 除非同时将左右外边距设置为自动 auto。 In this case,它被设置为 以可用宽度内的边界区域 为中心的值, fixed.	绝对定位布局模式 (Absolutely positioned layout mode)
flex, inline-flex	any	any	0, 除非有 正的 水平自由空间。在这种情况下，它均匀地分布 在所有水平的auto外边距上。	弹性盒布局模式 (Flexbox layout mode)

---

• 示例1: 给一段文本,设置外边距

  • 给父元素和本身,都设置边框和背景,方便看清 子元素的外边距

• css

* {
    /*去除各个浏览器默认的 内外边距*/
    margin: 0;
    padding: 0;
}
.boxparent{
    width: 20em;
    margin: 10px;
    background-color: #daffcc;
    border: solid 5px indianred;
}

.paddingStyle {
    width: 15em;
    border: solid 2px deepskyblue;
    background-color: #dddde3;

    /*给元素 设置内边距*/
    padding: 10px;

    /* 设置 外边距*/
    margin: 10px;
    margin: 10px 20px;
    margin: 10px 20px 2em;
    margin: 10px 20px 2em 3em;
    margin: auto;
    margin: 10px auto;
    margin: 0px;
    margin: -5px;
}

1个值: margin: 10px;	2个值: margin: 10px 20px;
3个值: margin: 10px 20px 2em;	4个值: margin: 10px 20px 2em 3em;
浏览器默认值(居中对齐): margin: auto;	搭配 auto(居中对齐): margin: 10px auto;
无外边距: margin: 0px; 和父元素的边框重合	负 外边距: margin: -5px; 覆盖了 父元素的边框

---

---

2. 外边距的 合并/折叠 ( margin collapsing )

• ⑴ 外边距合并
  • ① 针对对象: 块级元素⇒ 上下外边距⇒ 合并成 一个外边距 ⇒ 取较大的一个
    • 块级元素的 上外边距和下外边距 有时会合并（或折叠）为一个 外边距，其大小 取其中的最大者 (如果相等，则是其中的一个边距)，这种行为 称为 外边距折叠/合并（margin collapsing）
  • ② 不适用对象: 浮动/绝对定位 元素
    • 浮动元素和绝对定位元素的 外边距 不会折叠/合并。
    • 行内元素
      • 行内元素 实际上 不占 上下外边距。
      • 行内元素的的 左右外边距 不会合并。

---

• ⑵ 外边距的 合并的 3 种情况
  • 块元素: 垂直 相邻 外边距 会合并。
  • ① 父子: 父元素与 第一个/最后一个子元素之间 (都是 块级元素):
    • 第一个/最后一个,和父元素的上下外边距 才可能会合并 (中间的子元素,接触不到 父元素的上下外边距)
      • 父元素也设置了margin:10px,但垂直方向的margin,只显示了10px,不是叠加的20px
      • 
  • ② 兄弟: 相邻的 兄弟元素(都是 块级元素):
    • 相邻的 两个元素 之间的外边距 会折叠
      • （除非 后一个元素 需要 清除之前的浮动）。
        • 间距10px,而不是叠加的 20px
        • 
  • ③ 空的 块级元素
    • 一个块级元素中 不包含任何内容
    • 并且在其 margin-top 与 margin-bottom 上下外边距之间:
      • 没有 边框border、内边距padding、行内内容inline content、高度 height、最小高度 min-height将 上下外边距 分开，则该元素的 上下外边距会折叠/合并。

---

• ⑶ 合并外边距 和 负外边距:
  • ① 正负混合:相加
    • 当涉及到 负外边距时，合并外边距的大小 = 外边距最大值(一般是正值) + 外边距最小值(一般是负值)。
  • ② 都是负值:取最小值
    • 当所有的 外边距都为负时，合并外边距的大小 = 外边距最小值 (最负的边距)。
  • 适用于: 相邻的元素 和 嵌套的元素。

---

♣ 结束语 和 友情链接

---

• 参考文档
  • 外边距合并 | MDN
  • Mastering margin collapsing | MDN

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103392579
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！