Why is my <nav> element ignoring margin rules?

Question

I'm trying to create 10px margin white space around my

<nav class="navlist">

.

I tried adding

margin: 10px;

and

margin-bottom: 10px;

but my

navlist

is glued to my

<div id=header>

.

How can I "push" everything 10px away around my

navlist

, so there is white space between my

class=navlist

and

id=header

?

This is my html and css:

.navlist {

  margin: 20px;

  padding: 20px;

  background-color: aqua;

  text-align: center;

  display: inline;

  border: 5px solid black;

}

#header {

  background-color: black;

  color: white;

  padding: 5px;

}

.fruitsoorten {

  line-height: 30px;

  background-color: #eeeeee;

  height: 300px;

  width: 100px;

  float: left;

  padding: 5px;

}

#section {

  width: 350px;

  float: left;

  padding: 10px;

}

#footer {

  background-color: black;

  color: white;

  clear: both;

  text-align: center;

  padding: 5px;

}

<nav class="navlist">

  <a class="links" href="index.html">Homepage</a>

  <a class="links" href="contact.html">Contact Us</a>

  <a class="links" href="about.html">about us</a>

</nav>



<div id="header">

  <p>City Gallery</p>

</div>



<div class="fruitsoorten">

  London

  <br>Paris

  <br>Tokyo

</div>



<div id="section">

  <h2>London</h2>

  <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 been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div>



<div id="footer">

  Copyright © W3Schools.com

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Your nav has display: inline. Switch that to display: inline-block.

Top and bottom margins are ignored by inline elements.

According to the CSS Visual Formatting Model:

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

Horizontal margins are respected. Vertical margins are not.

In a block formatting context both horizontal and vertical margins are respected.

Why is my <nav> element ignoring margin rules?

Sign up