CODEWITHSUNDEEP
htmlcsspadding
spritecodej
spritecodej

Reputation: 459

padding is not disappearing in html

enter image description here

This example is based on the w3schools.

I want to attach the "nav" part to the header. The red notification part is issue. I don't know why the "nav" is not attached to header. I applied the padding as 0 px. Who knows how to solve the problem? or am I misunderstanding padding? Thank you for the answer.

My html source is below.

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 0em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    padding : 25px;
    border : 1px solid gray;
    background-color:orange;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 0px;
    overflow: hidden;
}
</style>

</head>
<body>
  <div class="container">
  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>

  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has beeon a major settlement for two millennia, it's history going back to its founding by the Romans, who named it Londinium.</p>
  </article>

  <footer>Copyright ? W3Schools.com</footer>

  </div>
</body>
</html>

Upvotes: 0

Views: 237

Answers (3)

user6214813
user6214813

Reputation:

Setting the margin:0; will also get rid of the space from the footer. To only remove the space from your header Set margin-top:0; in nav ul.

Upvotes: 0

user3041764
user3041764

Reputation: 849

Reset ul margin.

nav ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

Upvotes: -1

pwolaq
pwolaq

Reputation: 6381

your nav is built using ul tag, which has margin property set by default

this should solve your problem:

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

also, keep in mind that 0 shouldn't be used with units (it's a good practice)

Upvotes: 2

Related Questions