html - 删除导航栏和图像之间的间距

问题描述

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

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

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

        <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;

标签： htmlcss

html - 删除导航栏和图像之间的间距

问题描述

解决方案

推荐阅读