CSS 中的折疊邊距：初學者指南

介紹

沒有什麼比應用一種樣式但它沒有按預期工作更令人沮喪的了。邊距塌陷是一種導致意想不到的造型結果的現象。那麼，什麼是折疊邊距以及它如何影響 CSS 中的邊距？

利潤崩潰

折疊邊距源自於CSS屬性邊距，它控制元素外部的間距。顧名思義，當相鄰元素的邊距組合或「折疊」為一個而不是相加時，就會發生折疊邊距。這通常發生在同級元素之間或父元素和子元素之間。例如，如果兩個同級元素具有邊距（一個具有 20 像素的下邊距，另一個具有 30 像素的上邊距），您可能會預期總邊距為 50 像素。但是，由於折疊邊距，只會應用較大的邊距 30px，而較小的邊距 20px 將被折疊。

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

此外，如果父元素缺少內邊距或邊框，且其子元素具有上邊距，則該邊距可能會「折疊」到父元素之外，從而影響父元素的位置。

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

.child 的 20px 上邊距可能會折疊到 .parent 之外，從而將整個父級向下移動 20px。

這可能會讓菜鳥開發人員感到困惑（我直到最近才知道這一點），因為最終的間距可能不符合他們的期望。

解決方法

• 新增內邊距或邊框：為父元素增加少量內邊距或邊框將防止邊距塌陷。

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

• overflow屬性的使用：當父級的overflow屬性設定為visible以外的任何屬性（例如overflow:hidden;），它可以防止邊距折疊。

.parent {
    overflow: hidden;
}

• 使用 Flexbox 或網格佈局：這些佈局方法透過設計避免了邊距折疊問題。

彈性盒範例：

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

網格範例

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

• 使用Float或Inline-Block：將子元素浮動或設定為顯示：inline-block；還可以防止邊距塌陷。然而，我很少再看到浮動，但很高興知道遺留程式碼庫的情況。

浮動範例：

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

內聯區塊範例

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

結論

了解邊距折疊可以大大有助於網頁佈局中一致且預期的間距，特別是在使用區塊級元素時。值得注意的是，內聯元素（例如、、 等）通常不受邊距折疊的影響，因為與塊級元素相比，它們在生成垂直邊距方面具有獨特的行為。邊距折疊主要對區塊級元素（例如

、

、

等）帶來挑戰，因為它們可能具有相互交互的垂直邊距。

參考

• Mdn
• w3學校

以上是CSS 中的折疊邊距：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！