為什麼我的 div 元素會留下額外的空白，如何刪除預設的 CSS 樣式和邊距？

Eliminating Margin Space and Default CSS Styles

新手在初學程式設計時，可能會遇到 div 元素周圍出現額外空白的問題。此外，邊界、內邊距等樣式屬性不起作用，無法消除白色空間。

考慮以下程式碼：

<div>
<p>樣式表如下：</p>
<pre class="brush:php;toolbar:false">#header_div  {
    background: #0A62AA;
    height: 64px;
    min-width: 500px;
} 
#vipcentral_logo { float:left;  margin: 0 0 0 0; }
#intel_logo      { float:right; margin: 0 0 0 0; }

然而，效果圖卻顯示藍色區域與瀏覽器邊緣和工具列之間有額外空間：

[圖片顯示額外的空格]

解決這個問題的關鍵在於：

預設邊距： body 元素預設具有 8px 邊距，妨礙了 div 元素緊貼瀏覽器邊緣。

解：

1. 清除 body邊距：

body { 
    margin: 0;   /* Remove body margins */
}

2. 使用全域重設：

*,
*::before,
*::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

3. 限制重置範圍：

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

4. 其他CSS 重設：

meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
html5doctor.com/html- 5-reset-stylesheet/