CSS 基礎：為什麼給 html,body 設置 margin:0 後加 div 會出現 8px 邊距？

現象還原

/* 情況 1：無 div，頂部貼邊 */
html, body { margin: 0; padding: 0; }

/* 情況 2：加入 div，頂部出現 8px 空白 */
html, body, div { margin: 0; padding: 0; } /* 看似同樣設置，實則不同 */

根因：CSS 選擇器權重與瀏覽器默認樣式

瀏覽器 User Agent Stylesheet 默認：

body { margin: 8px; }  /* 關鍵！ */
div { margin: 0; }     /* div 默認無 margin */

兩種情況的樣式計算過程

關鍵差異：情況 1 中，選擇器 body 直接覆蓋了 UA 的 body。情況 2 中，選擇器 div 匹配 div 元素，但 並未選中 body，因此 body 保持 UA 默認的 8px！

正確的重置寫法

/* 方案 1：顯式列出所有需重置標籤 */
html, body, div, h1, h2, p, ul, li /* ... */ { margin: 0; padding: 0; }

/* 方案 2：通配符重置（簡單但影響性能） */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 方案 3：現代 CSS Reset / Normalize.css（推薦） */
/* 引入 normalize.css 或自定義 reset.css */

深度理解：為什麼 div 選擇器不影響 body？

• CSS 選擇器匹配的是 元素本身，而非祖先/後代
• div { margin: 0 } 僅作用於 <div> 元素
• body 是 <body> 元素，需要 body { margin: 0 } 直接匹配
• 後代選擇器 body div 選的是 body 內的 div，不選 body 本身

調試技巧：DevTools Computed 面板

1. 選中 body 元素
2. 查看 Computed → margin-top → 點擊展開
3. 可見 "user agent stylesheet: 8px" 被劃掉，或被作者樣式覆蓋
4. 若未被覆蓋，說明選擇器未匹配到 body