Javascript 如何删除div元素下面的空白

我有一些div，其中有一个小间隙或空白。 我尝试过改变保证金的顶部和底部，但它不起作用。我认为这与图像有关，但我还没有找到解决方案

HTML

---

从

#收割台bg

中移除

高度。您为高度设置了
590px

html中有一个`字符，这会产生额外的空间

定位和显示：flex不能很好地结合在一起

如果要在弯曲容器上使用position:absolute，请在#header bg上应用position:absolute，因为您有空白

检查此代码段


正文{
保证金：0；
填充：0；
字体系列：“Roboto”，无衬线；
字体大小：400；
线高：1.43；
颜色：红色；
}
p{
字体大小：16px；
}
a:链接{
字体大小：16px；
文字装饰：无；
保证金：0；
填充：0；
}
a:参观了{
文字装饰：无；
保证金：0；
填充：0；
}
h1，
h2，
h3，
h4，
h5，
h6，
ul，
ol,，
李{
保证金：0；
填充：0；
}
ul，
ol{
列表样式类型：无；
}
：：选择{
颜色：#fff；
背景色：#333；
}
：-moz选择{
颜色：#fff；
背景色：#333；
}
.clearfix:：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.菜单{
位置：相对位置；
背景色：#666666；
宽度：100%；
高度：自动；
排名：0；
左：0；
z指数：150；
页边距底部：0；
}
.logo:link{
浮动：左；
字号：28px；
颜色：白色；
左边距：30px；
边缘顶部：20px；
边缘底部：20px；
}
.导航链接：链接{
浮动：对；
字号：18px；
颜色：白色；
右边距：20px；
边缘顶部：30px；
过渡：所有0.2秒缓解；
-webkit转换：所有0.2秒易入易出；
-moz转换：所有0.2秒缓进缓出；
-o型过渡：所有0.2秒缓进缓出；
}
.导航链接：悬停{
颜色：#FF5B；
}
#标题背景{
位置：相对位置；
宽度：100%；
高度：590px；
边际上限：0；
背景图片：url(https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png);
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
线高：0px；
}
#标题背景{
位置：绝对位置；
}
#标题包装{
宽度：100%；
身高：100%；
显示器：flex；
柔性流：行换行；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
线高：0px；
}
/*-----------------------------------------------------细节----------------------------*/
.详细信息包装{
位置：相对位置；
宽度：100%；
高度：400px；
}

Vizion适应度
海洛——细节包装器
在这些div之间有一个'

用这个替换那些div

    <div id = "header-bg">
        <div id = "header-wrapper">

        </div>
    </div>

   <div class = "details-wrapper">

    </div>


您需要指定目标删除#标题bg和之间的空白。详细信息包装器您到底想实现什么和位置：绝对/相对和显示：flex不在一起谢谢我不知道显示flex与定位不匹配。
body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.43;
    color: red;
}

p{
    font-size: 16px;
}

a:link{
    font-size: 16px;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

a:visited{
    text-decoration: none;
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin: 0;
    padding: 0;

}

ul, ol{
    list-style-type: none;
}

::selection{
    color: #fff;
    background-color: #333;
}

::-moz-selection{
    color: #fff;
    background-color: #333;
}

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}




.menu{
    position:relative;
    background-color: #666666;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 150;
    margin-bottom: 0;
}

.logo:link{
    float: left;
    font-size: 28px;
    color: white;
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;


}

.nav-links:link{
    float: right;
    font-size: 18px;
    color: white;
    margin-right: 20px;
    margin-top: 30px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;

}

.nav-links:hover{
    color: #ff5b5b;
}

#header-bg{
    position: relative;
    width: 100%;
    height: 590px;
    margin-top: 0;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    line-height: 0px;


}

#header-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 0px;

}

/*-----------------------------------------------------DETAILS----------------------------*/

.details-wrapper{
    position: relative;
    width: 100%;
    height: 400px;
    background-color: red;

}

    <div id = "header-bg">
        <div id = "header-wrapper">

        </div>
    </div>

   <div class = "details-wrapper">

    </div>