margin用于控制元素外边距，提升页面布局清晰度；支持四方向设置或统一设置，可使用px、%、auto等值；通过margin: 0 auto可实现块级元素水平居中；需注意垂直方向相邻元素的margin合并问题，常取较大值，可通过设置单边margin、添加border或触发BFC避免。

在网页布局中，margin 属性用于控制元素周围的空白区域，也就是外边距。合理使用 margin 可以让页面结构更清晰、元素之间更有层次感。下面介绍 margin 的基本语法和常见应用方法。

margin 基本语法

margin 可以单独设置四个方向，也可以统一设置。支持长度值（如 px、em）、百分比（%）或 auto。

常用写法：

• margin: 10px; — 四个方向均为 10px
• margin: 10px 20px; — 上下为 10px，左右为 20px
• margin: 10px 20px 30px; — 上：10px，右：20px，下：30px，左：自动对称
• margin: 10px 20px 30px 40px; — 顺时针：上、右、下、左

单独设置方向外边距

如果只想调整某一侧的外边距，可以使用以下属性：

• margin-top: 设置上外边距
• margin-right: 设置右外边距
• margin-bottom: 设置下外边距
• margin-left: 设置左外边距

例如：

div {
  margin-top: 20px;
  margin-left: 15px;
}

margin 的 auto 值实现居中

当设置一个块级元素的宽度后，使用 margin: 0 auto; 可使其在父容器中水平居中。

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

立即学习“前端免费学习笔记（深入）”；

示例：

.container {
  width: 80%;
  margin: 0 auto; /* 水平居中 */
  background-color: #f0f0f0;
}

注意：inline 元素或未设置宽度的 block 元素无法通过此方式居中。

margin 合并问题（Margin Collapse）

在垂直方向上，相邻两个块级元素的 margin 会发生“合并”，取其中较大的那个值作为实际间距。

常见情况：

• 两个上下相邻的 div，分别设置 margin-bottom 和 margin-top，最终间距不是相加，而是取最大值
• 父元素与第一个子元素的上边距也可能发生合并

避免方法：

• 只给其中一个元素设置 margin
• 使用 padding 或 border 分隔
• 改变元素的 BFC（块格式化上下文）状态，如添加 overflow: hidden

基本上就这些。掌握 margin 的设置方式，能有效提升页面排版的灵活性和美观度。