CSS Margin: 0 is not setting to 0

* { margin: 0; padding: 0; }
margin: 0 auto
remove margin css
how to remove default margin in css
css zero out
margin 0 auto padding
default margin and padding css
css margin color

I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?

Screen Shot of the problem

Style Sheet

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

Here's the whole file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>

Try...

body {
   margin: 0;
   padding: 0;
}

jsFiddle.

Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.

Body margin 0 not working, One the techniques I have advocated using for a long time is this: * { margin: 0; padding: 0; } This is part of the "CSS Reset" theory which helps  The problem: Even though i set the margin to 0, the margin is not setting to 0 and leaves 8px of space.

You need to set the actual page to margin:0 and padding: 0 to the actual html, not just the body.

use this in your css stylesheet.

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

that will set the whole page to 0, for a fresh clean start with no margin or paddings.

* { margin: 0; padding: 0; } No Longer Cool, to zero for any H1, H2, etc. elements you have within your HEADER div. This will get rid of any extra space which may show around the text. @Daryn: Thanks for the link! Yeah, I’ve seen that before but it never really sunk in before the value. That big chunk of CSS actually reduces the render load on pages and keeps things more cross browser consistent without breaking good default settings.

you should have either (or both):

  1. a paddding != 0 on body
  2. a margin !=0 on #header

try

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

The margin is the "space" outside the box, the padding is the "space" inside the box (between the border and the content). The !important prevent overriding of property by latter rules.

Removing body margin in CSS, There are properties for setting the margin for each side of an element (top, right, auto - the browser calculates the margin; length - specifies a margin in px, pt,  So "margin:0 auto" isn't likely going to show any effect as you'll need something smaller than 100% width. If you're just trying to center the button, why not just center align text? ie. "text-align:center" in the DIV style.

Try

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

CSS Margin, In addition, there are spaces above the header and on the sides. Do I have to set my margin values into the negatives (example being margin:-12)  .box { margin: 0 1.5em; } .box { margin: 0 1.5em 0 1.5em; } Thus, if only one value is defined, this sets all four margins to the same value. If three values are declared, it is margin: [top] [left-and-right] [bottom];. Any of the individual margins can be declared using longhand, in which case you would define only one value per property:

h1 {
margin-top:0;
padding-top: 0;}

It' s just a misunderstanding with h1 tag. You have to set h1 tag margin-top and padding-top to 0 (zero).

What does auto do in margin:0 auto?, to use CSS margins, padding, and borders by setting them to zero by Sadly, the default value for margins, padding, and borders do not  Margin - Individual Sides. CSS has properties for specifying the margin for each side of an element: margin-top; margin-right; margin-bottom; margin-left; All the margin properties can have the following values: auto - the browser calculates the margin; length - specifies a margin in px, pt, cm, etc.

Why are there margins even though I set margin to 0?, This article covers most cases why css margins are not working the way you expect them to be. Whitespaces between inline-blocks. If you put two  left margin is 20px; If the margin property has three values: margin: 10px 5px 15px; top margin is 10px; right and left margins are 5px; bottom margin is 15px; If the margin property has two values: margin: 10px 5px; top and bottom margins are 10px; right and left margins are 5px; If the margin property has one value: margin: 10px; all four margins are 10px; Note: Negative values are allowed.

Use CSS to Zero Out Your Margins and Borders, Hello all, sorry to be so needy. I have no clue what I'm doing wrong. It was working for awhile and suddenly stopped. I have a feeling I've added an element that  However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use margin: 0 auto;. Margin collapsing. Elements' top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins.

Ultimate Guide to non-working CSS margins, If you don't like CSS and you have problems with it, you probably also had a problem Then you came across a fantastic solution margin: 0 auto; which, according to Well, it does not and this article will tell you why. so… by setting the margin property we haven't changed the whole box width, instead  Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins. The only problem occurs when the browser window is narrower than the width of your element.

Comments
  • I hope this link(stackoverflow.com/a/18772399/2991952) will help you out effectively.
  • It's actually margins collapse, when two margin collide, the margin will depends on the larger margin. You can refer to this site MDN - Mastering margin collapsing
  • No it's not working. But when I insert something without any tags, in between "header" and "header_content" tags its working
  • @Nipuna It worked for me. Try the CSS reset I linked to, there may be more margins and/or paddings in play.
  • What exactly does the * do?
  • "that will set the whole page to 0". You're right, it will set the WHOLE page to 0. With the * every single element on the page will have a margin and padding of 0 which is not wanted.
  • Worked for me. Thank you.
  • Why * and html? Won't the * match the html element?
  • I published the whole html document. Is it work fine for you?
  • no, don't work... and can't see why. this is frustrating ! all dev tools show a margin/padding of 0.
  • You should use !important very sparingly, if at all.