Hyrule Hyrule - 6 months ago 11
CSS Question

Why Isn't there space around my <nav>?

I'm trying to create a 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;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Citrongiz Home</title>
<meta charset="utf-8"><link rel="stylesheet" href="main.css">
</head>
<body>
<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>
</body>
</html>




Answer

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

Top and bottom margins will be ignored on 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. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

Comments