删除导航栏和图像之间的间距答案

【问题标题】：Remove spacing between navbar and image删除导航栏和图像之间的间距
【发布时间】：2021-05-05 19:40:34
【问题描述】：

我有一个带有徽标和适当间隔的链接的导航栏，在英雄部分中，我使用全宽和高度的图像，但如果在导航和英雄部分之间留下空白区域。我已经搜索了如何解决这个问题，但似乎无法弄清楚。

如何删除导航和下一部分之间的空格？

*已解决 - 在 #container-bg {} 类中添加 overflow: auto; 后，空白区域折叠，现在导航跟随下一部分出现任何空间问题。

        <header>
            <img 
            src="https://cdn.pixabay.com/photo/2017/09/26/21/45/spiral- 
            2790215__480.png"/>
            <nav class="nav-container">
                <ul>
                    <li><a href="index.html" class="active">Home</a> 
                    </li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </nav>
        </header>
      <div id="container-bg">
            <div class="content-wrapper">
                <h1>Sample text</h1>
                <p>More sample text</p>
                <a href="/contact.html">Contact </a>
            </div>

CSS


   
    
    header img {
        width: 40px;
        position: relative;
        left: 120px;
        top: 15px;
    }
    
    .nav-container {
        float: right;
    }
    
    .nav-container ul {
        margin: 0;
    }
    
    .nav-container ul li {
        display: inline-block;
    }
    
    .nav-container ul li a {
        text-decoration: none;
        padding-right: 60px;
        position: relative;
        font-size: large;
        color: black;
        top: 22px;
        right: 120px;
        margin: 0px 0px 0px 20px;
        padding: 0px 4px 6px 4px;
    }

    #container-bg {
    background: url(img/img-bg.jpg) no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    }

    .content-wrapper {
        margin: 0 auto;
        width: 80%;
        text-align: center;
        position: relative;
        top: 30%;
    }
    
    .content-wrapper a {
        background-color: blue;
        color: white;
        border-radius: 15px;
        text-decoration: none;
        text-transform: uppercase;
        border: 1px solid #ffffff;
        padding: 12px 18px;
        font-size: 22px;
        cursor: pointer;

【问题讨论】：

不清楚你在问什么。 “在两个部分之间留一个空白” - 具体在哪里？请提供一个实际显示这一点的示例。
抱歉，我在主帖中添加了图片示例。
谷歌这个：stackoverflow.com/questions/13573653/… - 你的h1 边距正在拉下父容器。
谢谢@prettyInPink 它不是h1，但overflow: auto; 需要添加到#container-bg 中，这是我通过阅读您发布的链接获得的！谢谢！

标签： html css

【解决方案1】：

我想我不明白这个问题，但它可能会有所帮助

.content-wrapper {
  margin: 0 auto;
  width: 80%;
  text-align: center;
  position: relative;
  top: 0%; // here is the trick
}

【讨论】：

您好，感谢您的回复，但是通过编辑 top: 0%;它把我的 h1 推到了最顶端。

【解决方案2】：

在#container-bg {} 类中添加overflow: auto; 后，空白区域折叠，现在导航跟随下一部分，没有任何间距或间隙问题。

【讨论】：