如何缩小导航栏（nav）与文章标题（post-title）的间距？

我的博客文章模板在窗口处于最大化状态时，nav与post-title之间的间距过大，希望缩小该间距并保持一致。尝试过减少padding-top以及移除justify-content，但窗口最大化时标题的位置几乎没有变化。

相关代码 #

CSS代码

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Cambria', serif;
  line-height: 1.6;
  background-color: transparent;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  margin: auto;
  text-align: center;
}

nav {
  background-color: transparent;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

nav a {
  color: #555;
  margin: 0 15px;
  text-decoration: none;
  font-size: 18px;
}

nav a:hover {
  color: #555;
  text-decoration: underline;
}

.post-title {
  font-size: 32px;
  padding: 5px 10px;
  margin: 2px 0;
}

.post-date {
  font-size: 18px;
  color: #888;
  margin-bottom: 40px;
}

.post-content {
  text-align: left;
}

.post-content h2 {
  margin-top: 40px;
  font-size: 24px;
  color: #444;
}

.post-content p {
  margin-bottom: 20px;
}

footer {
  color: #555;
  text-align: center;
  padding: 10px 20px;
  background-color: transparent;
}

HTML代码

<div class="wrapper">
  <nav>
    <a href="button1.html">Button 1</a>
    <a href="button2.html">Button 2</a>
    <a href="button3.html">Button 3</a>
  </nav>
  <div class="content">
    <div class="container">
      <div class="post-title">Title</div>
      <div class="post-date">Date</div>
      <div class="post-content">
        <p><em>Subheader</em></p>

        <h2>Subheading 1</h2>
        <p>Content</p>

        <h2>Subheading 2</h2>
        <p>Content</p>

        <h2>Conclusion</h2>
        <p>Content</p>
      </div>
    </div>
  </div>
</div>

解决方法 #

问题根源是.content的justify-content: center属性——它会让内容在垂直方向居中，窗口尺寸越大，导航栏与标题之间的间距就会被拉伸得越宽。只需修改以下样式即可解决：

方案一：调整.content的样式 #

移除justify-content: center，并通过padding-top控制固定间距：

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 移除垂直居中属性 */
  padding-top: 20px; /* 可根据需求调整此值，固定导航与标题的间距 */
}

方案二：调整.container的外边距 #

将.container的margin: auto改为顶部固定外边距，左右保持自动居中：

.container {
  width: 80%;
  margin: 20px auto 0; /* 顶部20px，左右自动，底部0 */
  text-align: center;
}

两种方案都能让导航栏与标题的间距保持固定，不会随窗口最大化而被拉大。

内容的提问来源于stack exchange，提问作者clouds