htmlcssmargincss-reset

How to remove margin space around body or clear default css styles


I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point out that I tried many combinations of border: 0, padding:0, etc. and nothing seemed to get rid of the white space.

Here is the code:

<html>
<head>
    <style type="text/css">
        #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; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

This is what it looks like (I inserted red arrows to explicitly call out the extra space):

Extra space around a div element

I was expecting the blue color to abut directly to the browser edges and toolbar. The images are both exactly 64 pixels tall and have the same background color as the one assigned to #header_div. Any information would be greatly appreciated.


Solution

  • body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html

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

    Or you could use this useful Global reset

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

    If you want something less * global:

    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;
    }
    

    some other CSS Reset:

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