🔸negative margin

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 卻不會讓元素往下偏移呢？

答：因為正常的文件流 (normal flow) 是由左至右、由上而下，所以元素會向左上方靠攏，因此造成負的 margin-left 讓元素往左邊偏移，但也是因為文件流的關係，負的 margin-bottom 並不會讓元素往下偏移（因為那是文件流的反方向），不過卻會造成下方元素往上靠攏（往文件流的方向）。

💈範例

這個例子裡面，照理說 <button> 的邊框應該跟隔壁的 <div> 一樣，在橘色邊框下面，但是瀏覽器應該給了 <button> 特殊權限，讓它的邊框浮在橘色邊框上面❗