CODEWITHSUNDEEP
htmlcss
XLordalX
XLordalX

Reputation: 594

CSS Image not touching top

I am creating a navigation bar which is horizontal and touches both sizes of the screen. The only problem is that it doesn't touch the top (https://i.sstatic.net/3nRQ7.png as you can see the yellow rectangle doesn't touch the top) I am already doing this in CSS:

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

HTML Code:

<div id="nav">
    <ul>
        <li><a href="/test">HOME</a></li>
    </ul>
</div>

What am I doing wrong?

Upvotes: 0

Views: 2148

Answers (2)

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

Personally I use:

 *{
    padding: 0;
    margin: 0;
   /* I usually use this too: */
   box-sizing: border-box;
}

This removes padding and margins from every element. Stops incidents like yours happening where I want everything to be flush. It gives me more control over the elements.

The issue, as other answers have stated, your ul has padding too. The above code will fix that and any future issues.

Upvotes: 1

user3756683
user3756683

Reputation:

Your <ul> is set as display:block; by default. You are seeing the line break that precedes it. You have to account for that in your CSS with something like a margin-top:-10px;

Upvotes: 0

Related Questions