Unable to add space above navigation bar - html

Question

I'm trying to add a space above my navigation bar, however the code I'm using is failing to do so.
My CSS
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
A Fiddle
https://jsfiddle.net/xuk2nk46/

Answer 1

.top-nav {
padding-top: 40px;
}

Answer 2

u have given two values to top-padding
.top-nav a {
padding-top: 40px;
}
and
.
top-nav ul a {
color: #000;
padding: 0 10px;}
the second one is applied which is 0 px

Answer 3

.top-nav{
margin-top: 10px;
}
and remove the padding , or keep only one.

Answer 4

Try adding margin-top to .top-nav:
.top-nav {
margin-top: 20px;
}
Margin adds a space outside the element, while padding adds a space inside the element.

Answer 5

By default <a> in an inline element. So padding with top and bottom values won't apply.
You have to change the default type by inline-block to add top and bottom padding on it.
Also, you can group this two properties .top-nav a and .top-nav ul a together like this :
.top-nav ul li a {
display: inline-block;
color: #000;
padding: 20px 10px;
text-decoration: none;
font-size: 20px;
}
And then, you can set top and bottom padding values with this property : padding: 20px 10px; or use margin property like this margin: 20px 10px;

Answer 6

Just add a margin to your .top-nav :
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.top-nav {
margin: 30px 0 0 0; /* ADD MARGIN HERE */
}
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>Join Us</li>
</ul>
</nav>
(see also this Fiddle)