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還可以用來分離元素，實現頁面元素的層疊效果等等。

五、代碼示例

 div {
 background-color: #ddd;
 width: 200px;
 height: 200px;
 margin: 50px auto;
 }
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/192332.html