CSS导航栏是网页重要的组件之一。设置导航栏距离能使页面更加美观，在页面布局上也有更大的灵活性。本文将介绍如何使用CSS设置导航栏的距离。 首先，在HTML中创建导航栏。以下是一个简单的例子：

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

在此基础上，使用CSS设置导航栏距离。我们可以通过使用 margin 和 padding 属性来间接地设置距离。 margin 是一个元素与其它元素之间的距离，并且控制元素的外部空间。padding 是元素边框和元素内容之间的距离，并且控制元素的内部空间。 例如，我们可以通过以下CSS代码来设置导航栏距离：

nav {
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
}

在上述CSS代码中，我们设置了导航栏整体的 padding 为 20px。接下来，我们通过 margin 和 padding 属性来控制导航栏的各个元素之间的距离。我们将 ul 元素的 margin 和 padding 都设置为 0，将 li 元素设置为 inline-block 并设置 margin-right 为 20px。最后，我们设置链接的颜色和文本装饰。 除了设置 padding 和 margin，还可以使用 position 和 left/right 属性来调整导航栏的位置。例如，该代码可以使导航栏距离左侧边缘30像素：

nav {
position: relative;
left: 30px;
}

这样就可以简单地通过CSS设置导航栏的距离了。当然，这只是一种简单的方法。通过更复杂的CSS布局，我们可以创造出更多不同的导航栏效果。