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

Asked 3/3, 2012 at 15:32 Answered 19/12, 2017 at 2:57

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.

Electrician answered 3/3, 2012 at 15:32 Comment(2)

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. – Assonance 3/3, 2012 at 15:36

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... – Sextan 3/3, 2012 at 15:43

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/
…

Decretal answered 3/3, 2012 at 15:36 Comment(1)

Thanks everyone for all of your help! I tried this one first as the "homerun" solution and it worked well. Problem solved! – Electrician 3/3, 2012 at 16:0

try removing the padding/margins from the body tag.

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

Eran answered 3/3, 2012 at 15:36 Comment(0)

try to ad the following in your CSS:

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

Outstretch answered 3/3, 2012 at 15:34 Comment(0)

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

Spec answered 3/3, 2012 at 15:35 Comment(0)

I found this problem continued even when setting the BODY MARGIN to zero.

However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.

body { margin:0px; }

header { border:1px black solid; }

If you have any H1, H2, tags within your HEADER you will also need to set the MARGIN for these tags to zero, this will get rid of any extra space which may show up.

Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.

Inclination answered 2/11, 2015 at 12:47 Comment(0)

Go with this

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

Birdie answered 5/8, 2016 at 4:38 Comment(0)

I had the same problem and my first <p> element which was at the top of the page and also had a browser webkit default margin. This was pushing my entire div down which had the same effect you were talking about so watch out for any text-based elements that are at the very top of the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

So just remember to check all child elements not only the html and body tags.

Fao answered 19/12, 2017 at 2:57 Comment(0)

Recommended topics

Hot tags