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

html css margin css-reset

126,231

Solution 1

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

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

If you want something less * global than:

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://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…

Solution 2

try removing the padding/margins from the body tag.

body{
padding:0px;
margin:0px;
}

Solution 3

try to ad the following in your CSS:

body, html{
    padding:0;
    margin:0;
}

Solution 4

That's the default margin/padding of the body element.

Some browsers have a default margin, some a default padding, and both are applied as a padding in the body element.

Add this to your CSS:

body { margin: 0; padding: 0; }

Solution 5

Go with this

body {
    padding:0px;
    margin:0px;
}

View more solutions

126,231

Anthony

Electrical Engineer, Programmer, Professional Sarcasm Fountain

Updated on July 09, 2022

Comments

Anthony almost 2 years
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):

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.
- Charles Brunet over 12 years
  
  Inspect your element using Google Chrome or Firefox web-developer add-on to see what styles are applied to it. It is probably a margin or padding of the head or the html element of your page.
- kaj over 12 years
  
  One simple tip for finding out where a space is coming from is to set the background colour to something different for each element. As well as using tools to inspect the elements...
Anthony over 12 years

Thanks everyone for all of your help! I tried this one first as the "homerun" solution and it worked well. Problem solved!