How do I get rid of the white space at the top of my web page?

Question

How do I get rid of the white space at the top of my page?

I have tried css resets, removing <p> tags, changing <body>, <html>, and <div> margins and nothing seems to work.

<html>
    <head>
        <title>Title</title><meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {
                margin: 0;
                padding: 0;
            }

            #container {
                background-color: black;
                color: white;
                width: 800px;
                margin-top: 0px;
                margin-bottom: 0px;
                margin-left: auto;
                margin-right: auto;
            }
            #inner-container {
                margin: 10px 10px 10px 10px;
            }
            p {
                margin-top: 0px;
            }

        </style>
    </head>
    <body><div id="container"><div id="inner-container">
                    <p>Body Text</p>
            </div></div></body></html>

score 4 · Accepted Answer · answered Apr 15 '15 at 23:20

4

Your whitespace is coming from the top margin of 10px on #inner-container. See this JSFiddle with the top margin changed to 0px: https://jsfiddle.net/rcz6ksft/.

#inner-container {
    margin: 0px 10px 10px 10px;
}

answered Apr 15 '15 at 23:20

JBzd

715
3
12

My guess is you meant for #inner-container to have padding to expand the black background instead, as well, instead of offset the whole element? – JBzd Apr 15 '15 at 23:23

Aaron Vanston · Answer 2 · 2015-04-15T23:25:33.577

You will need to remove margins for child elements as they will create the white gaps if they are close to the edge of the website. I have updated the margins to be padding instead., this will create the same effect however the element will span right to the edge of the page.

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

            #container {
                background-color: black;
                color: white;
                width: 800px;
                margin-top: 0px;
                margin-bottom: 0px;
            }
            #inner-container {
                padding: 10px 10px 10px 10px;
            }
            p {
                margin-top: 0px;
            }

<div id="container">
    <div id="inner-container">
        <p>Body Text</p>
    </div>
</div>

How do I get rid of the white space at the top of my web page?

2 Answers2