Hyrule Hyrule - 6 months ago 13
HTML Question

Why is my <nav> element ignoring margin rules?

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>




Answer

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.