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;margin-bottom: 10px;navlist<div id=header>How can I "push" everything 10px away around my
navlistclass=navlistid=headerThis 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 Source
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.