CSS ⟩ box model ⟩ margin ⟩ negative margin
使用場合:
調整間距:微調元素之間的間距而不改變其他樣式。
製造重疊:讓元素部分或完全重疊到另一個元素上。
對齊內容:用來微調元素的位置,讓它看起來更整齊。
打破正常的文檔流:讓元素超出父容器或正常的佈局範圍。
Using negative margins to overlap elements can render some elements unclickable if they’re moved beneath other elements.
MDN ⟩ CSS ⟩ margin
📗 Negative margins in CSS
ChatGPT ⟩ negative margins?
🗣️ How do negative margins work?
問:為什麼負的 margin-left 會讓元素往左邊偏移,而負的 margin-bottom 卻不會讓元素往下偏移呢?
margin-left
margin-bottom
答:因為正常的文件流 (normal flow) 是由左至右、由上而下,所以元素會向左上方靠攏,因此造成負的 margin-left 讓元素往左邊偏移,但也是因為文件流的關係,負的 margin-bottom 並不會讓元素往下偏移(因為那是文件流的反方向),不過卻會造成下方元素往上靠攏(往文件流的方向)。
<button>
<div>
Last updated 6 months ago
Was this helpful?