Prince Merdz February 2016

Spaces between divs and between the page

Okay sorry guys if this is a stupid question, I've done my best to search for possible solution or similar questions and while there are questions regarding <div> spaces, the solutions don't work when I try to implement it.

So basically to illustrate the problem. My page shows this: enter image description here

When I wanted it to show this: (edited via Paint) enter image description here

Here is the code for the body:

<body>
    <div id="site-wrapper">
        <header>
            <nav id="header-panel">
                <p>Welcome <?php echo $_SESSION['name']; ?>!</p>
            </nav>
        </header>

        <div id="core">
            <div id="left-nav">
                a
            </div>
            <div id="main-core">

            </div>
        </div>

        <footer>

        </footer>
    </div>
</body>

Now there are nothing special going on in the CSS, just colors so the default behavior of the arrangement is really like this. I've tried changing the margin, and the display types of the divs but there's no change and they still love their spaces.

header {
    background: #ffaa99;
    font-size: 1.5em;
    color: #333;
    margin: 0; padding: 0;
}

div{
    margin: 0; padding: 0;
    /* border: solid 1px black; */
}
#left-nav{

    background: #e0e0e0;
    display: inline-block;
    width: 250px;
}

Answers


Jeff B February 2016

Browsers have default style sheets that includes default margins, etc. It is a good practice to include a CSS reset file that essentially removes all of the defaults so you get expected behavior.

There are a number of sites that will provide this code for you, including:

http://cssreset.com/

Post Status

Asked in February 2016
Viewed 1,436 times
Voted 7
Answered 1 times

Search




Leave an answer