CSS Margins in HTML

一、什麼是CSS Margins?

CSS Margins是CSS中一組用於控制元素邊緣與周圍元素之間距離的屬性集合。對於一個HTML元素，它的四個邊緣（上、下、左、右）都可以設置margin。CSS Margin屬性值可以使用長度、百分比、auto或inherit值。

Margin由外邊框邊緣到周圍元素的距離組成。它們可用於分離HTML元素，改變元素周圍的空間、設置文本塊的外邊距和間隙。

以下是CSS Margin屬性的示例代碼：

.element {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: 10px;
}

二、Margin值的單位類型

CSS Margin屬性可以使用不同的單位。下面是Margin值的常用單位：

• px(像素)
• em(相對於父元素字體大小)
• rem(相對於根元素字體大小)
• % (相對於父元素)

還可以使用auto和inherit值。

三、Margin的組成部分

Margin屬性由四個不同的屬性值組成。它們控制元素周圍空間的大小和方式。

• Margin-top：元素頂部和上方元素之間的距離
• Margin-right：元素右側和右側元素之間的距離
• Margin-bottom：元素底部和下面元素之間的距離
• Margin-left：元素左側和左側元素之間的距離

當單個屬性值設置為其它單位時，它可能會影響元素周圍的所有空間。在此情況下，屬性值的計算方式如下:

margin: 上 右 下 左;
margin: 上和下 左和右;
margin: 上和下和左和右;

四、Margin合併

在元素之間存在空間時，Margin屬性可以產生合併效應。該合併效應由兩個或多個相鄰元素的Margin合併在一起時出現，從而產生單一Margin值。這可以導致添加或刪除Margin值的影響比預期的要小得多。這種效果叫做合併Margin(Collapsing margins)。

當相鄰元素的Margin-top和Margin-bottom合併時，它們中的較大值將成為新Margin值。這意味著兩個相鄰元素之間只需要設置一個Margin值就能夠完美分離。在下面兩個元素中，它們之間的Margin值將是20px而不是40px，即Margin-top:20px(Margin大的元素)。

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 40px;
}

五、Margin溢出時的表現

當元素的Margin值超出他的容器時，Margin溢出。

當元素的寬度或高度超過它的父元素時，Margin可以延伸到包含元素的外部。如下的例子中，元素的左側Margin溢出到父元素之外。

.container {
    width: 400px;
    height: 400px;
    background-color:grey;}
.element {
    height: 500px;
    width: 500px;
    margin-left: -50px;
    background-color: red;}