Clever Geek Handbook

Can't determine the reason for the 16px space

I have a bottom html and can't figure out where the top white space is coming from.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>mypage</title>
    <link rel="stylesheet" type="text/css" href="styles/test.css">
</head>
<body>
    <div class"header">
    </div>
    <div class="main">
        <div class="top-nav">
            <div class="top-nav-links">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>              
                </ul>
            </div>
        </div>
        <div class="side-nav">          
        </div>
        <div class="content">           
        </div>
    </div>
</body>
</html>

Using the style below you will see 16px visible at the top of the page. I can successfully remove the space by adding margin-top: -16px

to the body selector, but this seems to cause side effects. Can anyone point me in the right direction?

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

.main {
    background-color: #666
}
+3


source to share


1 answer


This is from the element ul

.

ul {
    margin: 0;
}


Fiddle: http://jsfiddle.net/6rgooxvL/

+5


source






More articles:


All Articles