沒有什麼比應用一種樣式但它沒有按預期工作更令人沮喪的了。邊距塌陷是一種導致意想不到的造型結果的現象。那麼,什麼是折疊邊距以及它如何影響 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; */ }
.parent { overflow: hidden; }
.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; }
.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; }
了解邊距折疊可以大大有助於網頁佈局中一致且預期的間距,特別是在使用區塊級元素時。值得注意的是,內聯元素(例如、、 等)通常不受邊距折疊的影響,因為與塊級元素相比,它們在生成垂直邊距方面具有獨特的行為。邊距折疊主要對區塊級元素(例如 、 等)帶來挑戰,因為它們可能具有相互交互的垂直邊距。
參考
以上是CSS 中的折疊邊距:初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!