17370845950

margin是元素边框外的空白区域，用于控制元素间距离，不影响自身大小但影响布局。可单独设置四个方向或使用简写：如margin:10px、margin:10px 20px等。通过margin:0 auto可实现块级元素水平居中。需注意垂直方向相邻块级元素会发生外边距合并，取较大值。合理运用margin能提升页面布局美观性与结构性。

在CSS中，margin 是指元素边框（border）外部的空白区域，用来控制元素与其他元素之间的距离。它不会影响元素本身的大小，但会影响元素在页面中的布局位置。

margin的基本设置方式

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

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

也可以使用简写属性 margin 来一次性设置四个方向：

• margin: 10px; — 四个方向都是10px
• margin: 10px 20px; — 上下为10px，左右为20px
• margin: 10px 20px 30px; — 上=10px，右=20px，下=30px，左=20px（对称）
• margin: 10px 20px 30px 40px; — 顺时针：上、右、下、左

使用auto实现居中

将左右margin设为auto，可以让块级元素在其父容器中水平居中。

margin: 0 auto; — 垂直外边距为0，水平自动分配，常用于固定宽度的盒子居中。

注意外边距合并（Margin Collapse）

在垂直方向上，相邻的两个块级元素的上下margin有时会合并成一个，取较大的那个值。这是正常现象，但布局时需留意。

基本上就这些，合理使用margin能让页面结构更清晰、美观。