为什么我的 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/