CSS HTML MARGIN

一、Margin是什么

Margin（外边距）是指元素的边框与外部元素之间的空白区域。它可以简单地理解为CSS中“盒模型”的一部分。Margin有四个方向：上、右、下、左。可以对每个方向设置不同的值，实现元素的自由布局。

二、Margin的用法

1、设置Margin

    
        div {
            margin: 10px;  /* 设置所有方向的margin */
        }

        div {
            margin-top: 10px;  /* 设置上方向的margin */
            margin-right: 20px;  /* 设置右方向的margin */
            margin-bottom: 30px;  /* 设置下方向的margin */
            margin-left: 40px;  /* 设置左方向的margin */
        }
    

2、Margin合并

当两个盒子相遇时，它们的边距不会简单地加在一起。相反，浏览器会选择最大的边距。例如：

    
        div1 {
            margin-bottom: 20px;
        }

        div2 {
            margin-top: 30px;
        }
    

那么，div1和div2之间的间距将会是30px，而不是20px+30px=50px。

三、Margin的注意点

1、Margin和定位

如果设置了元素的定位属性（如position:absolute或position:fixed），则其margin值不会对周围元素产生影响。

2、Margin的负值

Margin可以使用负值。使用负Margin可以将元素“拖出”其正常的位置，也可以“覆盖”其他元素。

3、Margin的百分比

Margin可以使用百分比。百分比值是相对于父元素或视口的宽度。例如：

    
        div {
            margin-right: 20%;  /* 距离父元素右侧距离为20% */
        }
    

四、Margin的实际应用

Margin可以帮助我们在Web开发中实现各种自适应布局。例如，设置不同方向的Margin值可以实现简单的元素居中。当然，Margin还可以用来分离元素，实现页面元素的层叠效果等等。

五、代码示例