Anthony Anthony - 1 year ago 119
CSS Question

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:

<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; }
<div id="header_div">
<img src="header_logo.png" id="vipcentral_logo">
<img src="intel_logo.png" id="intel_logo"/>

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.

Answer Source

Those are margins the browsers applies by default
A Global reset I personally use it a lot would be:

* { margin:0; padding:0; }

If you want something less global and more customizable:

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;

or try other CSS Reset you can find out the wild like:
and many other

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download