當需要突破常規佈局，負的 margin 可以讓元素重疊，打造意外的視覺效果。

##為什麼要有這功能
margin 是用來調整 HTML 元素之間的間距的重要屬性。它讓開發者能夠控制頁面上元素之間的間距，提供清晰的佈局，讓頁面設計更有條理且易於閱讀。藉由靈活的 margin 設定，開發者可以為網頁元素創造視覺間隔和空間，確保網頁佈局不顯得擁擠或混亂。

##核心結構
margin 是用來設置元素周圍的外部間距，分別可以控制上、右、下、左四個方向的間距。margin 屬性可以設定為單一值（應用於四個方向），也可以分別針對不同方向指定不同的間距，這使得設計更加靈活。

##主要功能
單位選擇：margin 可以用像素 (px)、百分比 (%)、em 等單位來表示，根據頁面的需求進行調整。
四向控制：可以單獨設置上、右、下、左四個方向的間距，或是一次設置全部方向的統一間距。
自動調整：margin 還支持 auto 屬性，自動根據剩餘空間來調整位置，常見於水平居中排版。

##注意事項
margin 的值可以設置為正數（增加間距）或負數（減少間距），但使用負數時需小心，可能會造成元素重疊或意外的佈局效果。
margin 的百分比單位是相對於父元素的寬度，這點在設計響應式佈局時需要特別注意。
margin 的自動值（auto）通常用於水平居中，但它的作用需要依賴於特定的元素上下文，例如塊級元素和固定寬度。

##簡單範例應用

<Style>
/* 設置一個區塊的外部間距 */
.box {
    width: 200px;  /* 設置區塊的寬度 */
    height: 100px; /* 設置區塊的高度 */
    background-color: lightblue; /* 區塊的背景顏色 */
    margin: 20px;  /* 設置區塊四周都有 20px 的間距 */
}

/* 設置不同方向的外部間距 */
.another-box {
    width: 150px;  
    height: 80px;  
    background-color: lightgreen;
    margin-top: 30px;    /* 設定上方間距 */
    margin-right: 10px;  /* 設定右方間距 */
    margin-bottom: 15px; /* 設定下方間距 */
    margin-left: 5px;    /* 設定左方間距 */
}

/* 使用 auto 讓區塊水平居中 */
.centered-box {
    width: 300px;  
    height: 100px; 
    background-color: lightcoral;
    margin: 0 auto; /* 上下不設間距，左右自動調整來使區塊居中 */
}
</Style>