如何让图片直接位于导航栏下方？CSS布局问题求助

我尝试将一张图片放在页面顶部、导航栏正下方，但无论使用margin还是padding CSS样式，图片始终停留在页面底部。若使用padding-bottom，图片会被裁剪对应像素（因设置了object-fit: cover;，否则图片会被拉伸）。

我发现一个奇怪的现象：图片总是距离页面顶部有一屏的距离，无论在笔记本还是手机上查看，都需要滚动一次才能看到图片。

我的需求是让图片紧贴导航栏（导航栏与图片之间无空隙）。

相关代码 #

图片的CSS代码 #

#image {
    bottom: 100px;
    height:500px;
    width:100%;
    object-fit: cover;
}

导航栏及全局CSS代码 #

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navcontainer {
    height: 100vh;
    width:100%;
}
nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 30px;
    padding-left: 10%;
    padding-right: 10%;
    background-color:cadetblue;
    margin-bottom: 0;
}
nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
}
nav ul li a {
    text-decoration: none;
    font-weight: bold;
    transition: ease-in-out 0.3s;
    padding: 10px;
}

问题根源在于.navcontainer设置了height: 100vh，这个样式让包裹导航栏的容器占满整个视口高度，直接把图片挤到了一屏之后的位置。按以下步骤修改即可解决：

1. 移除.navcontainer的全屏高度设置
   修改后的.navcontainer CSS：

   .navcontainer {
       width:100%;
   }
   

   容器会自动适配导航栏的实际高度，不再占用整屏空间。

2. 清理图片的无效定位样式
   图片的bottom: 100px属于无效属性（未设置position时不生效），移除后图片的CSS：

   #image {
       height:500px;
       width:100%;
       object-fit: cover;
   }
   

3. 确认无空隙设置
   全局样式已重置margin: 0，导航栏也保留了margin-bottom: 0，修改后图片会自动紧贴导航栏下方，无需额外调整padding或margin。

修改完成后，导航栏将位于页面顶部，图片紧随其后且无空隙，不会再被挤到页面底部。

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