Remove top and bottom body margins

Question

In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.

HTML code:

<!doctype html>
<html>
<head>
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta charset="utf-8" />
</head>
<body>

    <div id="pageWrapper">

        <div id="topBar">
            <ul>
                <li><a href="#">+Tomasz</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Grafika</a></li>
            </ul>
        </div> <!-- end of topBar -->

        <div id="middleBar">
            <div id="centerBox">
                <img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
                <input type="text" size="80" />
                <span id="countryName">Polska</span>
                <div id="centerBoxButtons">
                    <div class="button">Szukaj w Google</div>
                    <div class="button">Szczęśliwy traf</div>
                </div>
            </div> <!-- end of centerBox -->
        </div> <!-- end of middleBar -->

        <div id="bottomBar">
        </div> <!-- end of bottomBar -->

    </div> <!-- end of pageWrapper -->

</body>
</html>

CSS code:

html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

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

#pageWrapper {
    font-family: Tahoma, Arial, sans-serif;
    color: rgb(64,64,64);
    font-size: 0.85em;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited {
    text-decoration: none;
    color: rgb(64,64,64);
}

a:active, a:hover {
    text-decoration: underline;
    color: rgb(64,64,64);
}

#topBar {
    width: 100%;
    height: 60px;
    background-color: yellow;
    line-height: 60px;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

#topBar ul {
    list-style-type: none;
}

#topBar ul li {
    display: inline;
    margin: 0px 10px 0px 0px;
}

#middleBar {
    width: 100%;
    /*border: solid 2px black; /*----------delete this later*/
}

#centerBox {
    margin-top: 125px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 200px;
    /*border: solid 2px red; /*--------------delete later*/
}

#centerBox img {
    width: 269px;
    height: 95px;
    margin: 0px 166px 0px 166px;
}

#centerBox input[type="text"] {
    margin: 20px 0 0 0;
    padding: 0;
    height: 25px;

}

#countryName {
    font-size: 1.2em;
    font-weight: bold;
    color: grey;
    position: relative;
    bottom: 75px;
    left: 380px;
}

#centerBoxButtons {
    width: 250px;
    /*border: solid 2px blue; /*--------------delete later*/
    margin-left: 175px;
}

.button {
    font-weight: bold;
    background-color: rgb(240,240,240);
    border: solid 1px rgb(150,150,150);
    padding: 6px;
    font-size: 0.78em;
    display: inline;
    margin-left: 15px;
    border-radius: 4px;
}

.button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

possible duplicate of [How to remove margin space around body or clear default css styles](http://stackoverflow.com/questions/9547291/how-to-remove-margin-space-around-body-or-clear-default-css-styles) — huysentruitw, Feb 21 '15 at 10:35
start using css reset snippets, they save a lot time regarding things like this and they will make sure all standard elements are rendered the same on all browsers. — pankijs, Feb 21 '15 at 12:41

score 2 · Accepted Answer · answered Feb 21 '15 at 10:12

2

The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle

answered Feb 21 '15 at 10:12

Vinc199789

1,046
1
10
31

score 1 · Answer 2 · answered Feb 21 '15 at 10:31

This is a simple way you just put margin padding on top see the code.

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

html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

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

#pageWrapper {
    font-family: Tahoma, Arial, sans-serif;
    color: rgb(64,64,64);
    font-size: 0.85em;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited {
    text-decoration: none;
    color: rgb(64,64,64);
}

a:active, a:hover {
    text-decoration: underline;
    color: rgb(64,64,64);
}

#topBar {
    width: 100%;
    height: 60px;
    background-color: yellow;
    line-height: 60px;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

#topBar ul {
    list-style-type: none;
}

#topBar ul li {
    display: inline;
    margin: 0px 10px 0px 0px;
}

#middleBar {
    width: 100%;
    /*border: solid 2px black; /*----------delete this later*/
}

#centerBox {
    margin-top: 125px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 200px;
    /*border: solid 2px red; /*--------------delete later*/
}

#centerBox img {
    width: 269px;
    height: 95px;
    margin: 0px 166px 0px 166px;
}

#centerBox input[type="text"] {
    margin: 20px 0 0 0;
    padding: 0;
    height: 25px;

}

#countryName {
    font-size: 1.2em;
    font-weight: bold;
    color: grey;
    position: relative;
    bottom: 75px;
    left: 380px;
}

#centerBoxButtons {
    width: 250px;
    /*border: solid 2px blue; /*--------------delete later*/
    margin-left: 175px;
}

.button {
    font-weight: bold;
    background-color: rgb(240,240,240);
    border: solid 1px rgb(150,150,150);
    padding: 6px;
    font-size: 0.78em;
    display: inline;
    margin-left: 15px;
    border-radius: 4px;
}

.button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

<!doctype html>
<html>
<head>
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta charset="utf-8" />
</head>
<body>

    <div id="pageWrapper">

        <div id="topBar">
            <ul>
                <li><a href="#">+Tomasz</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Grafika</a></li>
            </ul>
        </div> <!-- end of topBar -->

        <div id="middleBar">
            <div id="centerBox">
                <img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
                <input type="text" size="80" />
                <span id="countryName">Polska</span>
                <div id="centerBoxButtons">
                    <div class="button">Szukaj w Google</div>
                    <div class="button">Szczęśliwy traf</div>
                </div>
            </div> <!-- end of centerBox -->
        </div> <!-- end of middleBar -->

        <div id="bottomBar">
        </div> <!-- end of bottomBar -->

    </div> <!-- end of pageWrapper -->

</body>
</html>

score 0 · Answer 3 · edited May 23 '17 at 12:06

What you see is the padding of the <ul> in the topbar. This happens because many HTML elements have their own default style. Also, these defaults are browser specific, which doesn't really help you if you want to create a layout that is pixel-precise against multiple browsers.

What I mostly to is simply reset all paddings and margins of all elements:

* {
   margin: 0;
   padding: 0;
}

Some will say that the above technique leads to heavier load of the rendering engine but I never had any issue by doing this. Anyway, you can find a lot of 'CSS reset' scripts that are more selective and are faster. Search other questions on SO tagged css-reset and also check this Q/A

Some popular CSS-reset sources:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

Remove top and bottom body margins

3 Answers3