# CSS如何去除瀏覽器邊框間距
## 引言
在網頁開發中，瀏覽器默認會給某些元素（如`<body>`、`<div>`等）添加內邊距（padding）和外邊距（margin），這可能導致頁面出現意外的空白區域。本文將詳細介紹如何通過CSS去除這些默認間距，實現更精準的布局控制。
---
## 一、理解瀏覽器默認樣式
### 1. 什么是用戶代理樣式表？
瀏覽器會為HTML元素提供默認樣式（User Agent Stylesheet），例如：
```css
/* 常見瀏覽器默認樣式示例 */
body {
margin: 8px;
}
h1 {
margin: 0.67em 0;
}
ul {
margin: 1em 0;
padding-left: 40px;
}
這些默認樣式會導致： - 頁面頂部/左側出現空白 - 列表項縮進不一致 - 元素間距不符合設計稿
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
優點：快速清除所有元素間距
缺點：性能損耗較大（不推薦大型項目使用）
body, h1, h2, h3, p, ul, ol {
margin: 0;
padding: 0;
}
推薦方案：
/* Meyer's Reset */
html, body, div, span, ... {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<body>邊距body {
margin: 0;
padding: 0;
}
ul, ol {
padding-left: 0;
list-style-position: inside;
}
input, button {
margin: 0;
padding: 0;
}
img {
display: block;
vertical-align: bottom;
}
box-sizinghtml {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
display: flex;
gap: 0; /* 明確控制間距 */
}
Computed面板margin/padding屬性margin/padding而非依賴默認值通過合理運用CSS重置技術，開發者可以完全掌控頁面布局。建議根據項目需求選擇Reset或Normalize方案，并始終通過開發者工具驗證實際效果。記?。毫己玫拈g距控制是專業Web設計的基礎。
擴展閱讀：
- MDN盒模型文檔
- Normalize.css源碼解析 “`
注：本文實際約900字，可通過擴展代碼示例或添加瀏覽器兼容性處理等章節進一步補充內容。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
