无法在导航栏上方添加 space

Question

我正在尝试在我的导航栏上方添加一个 space，但是我使用的代码没有这样做。

我的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;
}

一个Fiddle

https://jsfiddle.net/xuk2nk46/

Answer 1

你已经给顶部填充两个值

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

和 .

top-nav  ul a {
    color: #000;
    padding: 0 10px;}

应用第二个，即 0 px

Answer 2

.top-nav{
margin-top: 10px;
}

并删除填充，或者只保留一个。

Answer 3

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

Answer 4

尝试将 margin-top 添加到 .top-nav:

.top-nav {
   margin-top: 20px;
}

Margin 在元素外部添加一个 space，而 padding 在元素内部添加一个 space。

Answer 5

默认情况下 <a> 在 inline 元素中。因此 padding 与 top 和 bottom 值将不适用。

您必须通过 inline-block 更改默认类型以在其上添加 top 和 bottom padding。

此外，您可以像这样将 .top-nav a 和 .top-nav ul a 这两个属性组合在一起：

.top-nav ul li a {
    display: inline-block;
    color: #000;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 20px;
}

然后，您可以使用此属性设置顶部和底部填充值：padding: 20px 10px; 或像这样使用边距属性 margin: 20px 10px;

Answer 6

只需为您的 .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><a href="index.html">Home</a></li>
       <li><a href="index.html">Store</a></li>
       <li><a href="index.html">Blog</a></li>
       <li><a href="index.html" id="btn-special">Join Us</a></li>
    </ul>
</nav>

（另见 this Fiddle）

无法在导航栏上方添加 space

Unable to add space above navigation bar

html

css

navigationbar

我的CSS

一个Fiddle