HTML/CSS
element showing padding-top

Question

I am new to web and css design.. I have started playing with the HTML5 element

I have created a simple horizontal <nav> menu, but for some reason there is some padding showing above the menu stopping it from appear at the top of the page.

Here's a fiddle: http://jsfiddle.net/LmcE7/1/

HTML:

<nav class="site-nav">
    <ul>
        <li class=""> <a href=".html"></a>

        </li>
        <li class=""> <a class="" href=".html">Maps</a>

        </li>
        <li class=""> <a class="" href=".html">Lighting</a>

        </li>
        <li class=""> <a class="" href=".html">Services</a>

        </li>
        <li class=""> <a class="" href=".html">Contact Us</a> 
        </li>
    </ul>
</nav>

CSS:

article, aside, figcaption, figure, footer, header, main, nav, section {
    display: block;
}
body, dt, dd, h1, h2, h3, th, td {
    margin: 0 auto;
    padding:0;
    width: 70%;
}
ul, ol {
    list-style: none;
    padding: 0;
}

.site-nav {
    /*width: 100%;*/
    height: 48px;   
    background: #ac0c0c; /* Old browsers */ 
    background-image: -moz-linear-gradient(#bf0d0d, #860909); /* FF3.6+ */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf0d0d), color-stop(100%, #860909)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(#bf0d0d, #860909); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(#bf0d0d, #860909);/* Opera 11.10+ */
    background: -ms-linear-gradient(#bf0d0d, #860909); /* IE10+ */
    background-image: linear-gradient(#bf0d0d, #860909); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf0d0d', endColorstr='#860909',GradientType=0 ); /* IE6-8 */
    text-align: center;
}

.site-nav ul {
}

.site-nav li {
    display: inline;
    list-style-type: none;
}


.site-nav li a {
    text-align: center;
    padding-right: 40px;
    color: white;
}

.site-nav a:hover {
    background-color: #2d8ff0;
    color: white;
    text-shadow: none;
}

I've also noticed the text within each menu item is not appearing in the centre of its element

You could also try using a reset (something like normalize) as it will help with cross browser compatibility issues... — zik, Jun 30 '14 at 10:49

score 2 · Answer 1 · answered Jun 26 '14 at 18:27

2

Try this:

 ul, ol { margin-top: 0px; list-style: none; }

answered Jun 26 '14 at 18:27

clever_bassi

2,392
2
24
43

chris · Answer 2 · 2020-01-05T16:29:03.703

A ul has margin-top:1em by default. 1em is equal to your current font-size (16px by default), so if you change your font size for ul or its parent elements, the margin would also change.

This eliminates that:

  ul{margin-top:0px}

Your text is not centering because you have:

  site-nav li a {
    padding-right: 40px;
  }

Your a elements are displayed as inline by default, and thus have no width to center in.

One way to center the text and keep everything else the same would be to add equal padding to both sides:

  site-nav li a {
    padding-right: 20px;
    padding-left: 20px;
  }

However, it looks like you've added an extra item to the nav to help center your other links. Empty tags for display purposes are generally not a good practice.

If that is the case, the best solution is to remove the empty list-item & link from the html, remove the padding-right, change display to inline-block, and define a width for them instead:

<nav class="site-nav">
  <ul>
    <li class=""> <a class="" href=".html">Maps</a></li>
    <li class=""> <a class="" href=".html">Lighting</a></li>
    <li class=""> <a class="" href=".html">Services</a></li>
    <li class=""> <a class="" href=".html">Contact Us</a></li>
  </ul>
</nav>


.site-nav li a {
  padding-right: 0px;
  display:inline-block;
  width:15%;
}

score 0 · Answer 3 · answered Jun 26 '14 at 18:24

0

you can change your css for ul to margin 0 auto.

http://jsfiddle.net/LmcE7/7/`">JSFiddle:

answered Jun 26 '14 at 18:24

Mayank

112
8

score 0 · Answer 4 · answered Aug 26 '17 at 20:13

Ok...the nav bar doesn't stick to the top of the page because of the <ul> tag. The <ul> tag by default introduces some margin to the page. One more thing to pay attention here is different browsers introduce different margin's. So, to make sure that the nav bar stick to the top, we must explicitly zero the margin of <ul> tag. Just add the following code

.site-nav ul {
  margin-top:0px;
}

Since, we are on the subject the above stated problem can occur with other elements as well, so familiarity with the concepts of Normalize.css and css reset is important. Please give the attached link a read :

What is the difference between Normalize.css and Reset CSS?

score -1 · Answer 5 · answered Jun 26 '14 at 18:29

The nav has some margin around it, you should set this to 0. Margin is outside the element, padding is inside (Google a picture of the 'box-model' for clarification). This is something your browser does by default and these things are usually browser-dependant.

A good practice, I think, is to 'reset' the margin and padding of everything at the very top of your CSS stylesheet:

  * { 
  margin:0;
  padding:0;
}

A * means 'everything'. By doing this, you prevent these browser-dependant issues to be prevented.

HTML/CSS element showing padding-top

5 Answers5

HTML/CSS
element showing padding-top