CODEWITHSUNDEEP
htmlcss
wonderstruck80
wonderstruck80

Reputation: 357

Can't determine the cause of 16px of whitespace

I have the below html and cannot 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 below styling leaves 16px visible at the top of the page. I can successfully remove the white space by adding margin-top: -16px to the body selector but this seems to produce adverse side effects. Can someone point me in the right direction?

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

.main {
    background-color: #666
}

Upvotes: 3

Views: 60

Answers (1)

Bitwise Creative
Bitwise Creative

Reputation: 4105

It's from the ul element.

ul {
    margin: 0;
}

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

Upvotes: 4

Related Questions