Search code examples
htmlcsslayoutmargin

Div still has margin even with margin: 0;

I am trying to make a div with no margin around it (for a header across the page). I tried this:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
        .test {
            height: 100px;
            margin: 0;
            background-color: #000000;
        }
        </style>
    </head>
    <body>
        <div class="test">&nbsp;</div>
    </body>
</html>

but the div still has a margin around it. What am I doing wrong? Thanks for your help!

Solution

  • That's the default margin around body. Browsers define certain default values for certain CSS properties on certain elements - this is one of them. Unfortunately sometimes the default values vary from browser to browser.

    You should either use a so-called Reset CSS or remove the default margin:

    body { margin: 0; }

    jsFiddle Demo