Why is my div element leaving extra whitespace, and how can I remove default CSS styles and margins?

Eliminating Margin Space and Default CSS Styles

Newbies may encounter the problem of extra white space around div elements when they first learn programming. Additionally, style properties such as borders, padding, etc. have no effect and cannot eliminate white space.

Consider the following code:

<div>
<p>The style sheet is as follows: </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; }

However, the rendering shows blue areas with the browser edges and toolbars There is extra space between:

[Picture shows extra space]

The key to solving this problem is:

Default margin: The body element has 8px margins by default, which prevents the div element from hugging the edges of the browser.

Solution:

1. Clear body Margins:

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

2. Use global reset:

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

3. Limited reset range:

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. Others CSS reset:

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