Html 两个div之间的间距问题

在媒体查询中，两个同级div之间存在间距问题。 我不明白为什么会有间隔。我的

白绿色

div应该接触到

箭头框的底部

div，但出于某种原因，

白绿色

div似乎正在发挥

顶部：100px的作用来自
项目输入容器

有人知道为什么会这样吗

这就是它看起来的样子：


我的HTML

<div class="arrow_box">
  <div id="project-content-wrap">
    <div id="project-box-title1">KICK START YOUR</div>
    <div id="project-box-title2">PROJECT</div>
    <div id="project-box-description">We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.</div>
  </div>
</div>

<div class="white-green">
  <form action="" autocomplete="on" class="project-input-container">
    <input type="text" class="input-borderless" placeholder="Your Name">
    <input type="text" class="input-borderless" placeholder="Title/Role">
    <input type="email" class="input-borderless" placeholder="Email Address">
    <input type="text" class="input-borderless" placeholder="Phone Number">
    <input type="text" class="input-borderless" placeholder="Company/URL">
    <input type="text" class="input-borderless" placeholder="How did you hear about us?">
    <input type="text" class="input-borderless" placeholder="Which of our social media influenced you the most?">
    <input type="text" class="input-borderless" placeholder="Human Test: What day comess after Thursday?">
  </form>
</div>

媒体查询：

@media screen and (max-width:640px) {
.arrow_box {
    width: 100%;
    height: 400px;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: rgb(69,186,149);
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: rgb(69,186,149);
    border-width: 36px;
    margin-left: -36px;
    margin-top: 0;
}
#project-content-wrap {
  margin: 10% 5%;
}
#project-box-title1 {
  font-size: 1.1em;
  color: #FFF;
}
#project-box-title2 {
  font-size: 3.2em;
  color: #FFF;
  margin-top: 20px;
}
#project-box-description {
  font-size: 1.1em;
  color: #303030;
  margin-top: 40px;
  line-height: 1.6em;
}
/*-----Input div on project page----*/
.white-green {
  background-color: rgb(241,250,247);
  width: 100%;
  height: auto;
  /*margin-top: -30px;*/
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  position: relative;
  right: 0;
  top: 0;
}
.project-input-container {
   top: 100px;
  left: 3%;
  position: relative;
}
.input-borderless {
  width: 90%;
  border-top: 0px;
  border-bottom: 1px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: rgb(241,250,247);
  text-decoration: none;
  outline: none;
  display: block;
  padding: 10px 0;
  margin: 20px 0;
  font-size: 1.2em;
}
}

减少以下标记规则的值，请参阅

.project-input-container {
    top: 100px; /*this*/
    left: 3%;
    position: relative;
}

.project-input-container {
    margin-top: 160px; /*this*/
    margin-left: 9%;
}

减少以下标记规则的值，请参阅

.project-input-container {
    top: 100px; /*this*/
    left: 3%;
    position: relative;
}

.project-input-container {
    margin-top: 160px; /*this*/
    margin-left: 9%;
}

我想这个箭盒太大了。将其更改为高度：自动

@media screen and (max-width:640px) {
.arrow_box {
    width: 100%;
    height: auto;
}

我想这个箭盒太大了。将其更改为高度：自动

@media screen and (max-width:640px) {
.arrow_box {
    width: 100%;
    height: auto;
}

有几个问题。我用一些评论更新了你的CSS。修复程序在
@媒体屏幕中，并且（最大宽度：640px）{}
在末尾。
.arrow\u框{
位置：相对位置；
背景色：rgb（69186149）；
边框：4px实心rgb（69186149）；
宽度：33%；
高度：800px；
z指数：99；
}
.arrow\u box:之后，.arrow\u box:之前{
左：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.箭头框：在{
边框颜色：rgba（255,0,0,0）；
左边框颜色：rgb（69186149）；
边框宽度：40px；
利润上限：-40px；
}
.箭头框：在{
边框颜色：rgba（0,0,0,0）；
左边框颜色：rgb（69186149）；
边框宽度：26px；
利润上限：-26px；
}
#项目内容包装{
利润率：30%15%；
}
#项目-box-title1{
字体大小：1.3em；
颜色：#FFF；
}
#项目-box-title2{
字体大小：6.2米；
颜色：#FFF；
边缘顶部：20px；
}
#项目框说明{
字体大小：1.3em；
颜色：303030；
边缘顶部：50px；
线高：1.6em；
}
/*-----在项目页面上输入div----*/
.白绿色{
背景色：rgb（241250247）；
宽度：66.56%；
身高：100%；
左缘：33%；
右边距：0；
位置：绝对位置；
排名：0；
右：0；
}
.项目输入容器{
边缘顶部：160px；
左缘：9%；
}
.输入无边界{
宽度：80%；
边框顶部：0px；
边框底部：1px纯绿色；
右边框：0px；
左边框：0px；
背景色：rgb（241250247）；
文字装饰：无；
大纲：无；
显示：块；
填充：10px0；
利润率：20px0；
字号：1.6em；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.箭盒{
宽度：100%；
高度：400px；
}
.arrow\u box:之后，.arrow\u box:之前{
最高：100%；
左：50%；
}
.箭头框：在{
边框颜色：rgba（136183213,0）；
边框顶色：rgb（69186149）；
边框宽度：30px；
左边距：-30px；
}
.箭头框：在{
边框颜色：rgba（1942252450）；
边框顶色：rgb（69186149）；
边框宽度：36px；
左边距：-36px；
边际上限：0；
}
#项目内容包装{
利润率：10%5%；
}
#项目-box-title1{
字体大小：1.1米；
颜色：#FFF；
}
#项目-box-title2{
字体大小：3.2米；
颜色：#FFF；
边缘顶部：20px；
}
#项目框说明{
字体大小：1.1米；
颜色：303030；
边缘顶端：40px；
线高：1.6em；
}
/*-----在项目页面上输入div----*/
.白绿色{
背景色：rgb（241250247）；
宽度：100%；
高度：自动；
/*页边空白顶部：-30px；有一些问题。我用一些注释更新了您的CSS。修复程序在
@媒体屏幕中，并且（最大宽度：640px）{}
接近结尾。
.arrow\u框{
位置：相对位置；
背景色：rgb（69186149）；
边框：4px实心rgb（69186149）；
宽度：33%；
高度：800px；
z指数：99；
}
.arrow\u box:之后，.arrow\u box:之前{
左：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.箭头框：在{
边框颜色：rgba（255,0,0,0）；
左边框颜色：rgb（69186149）；
边框宽度：40px；
利润上限：-40px；
}
.箭头框：在{
边框颜色：rgba（0,0,0,0）；
左边框颜色：rgb（69186149）；
边框宽度：26px；
利润上限：-26px；
}
#项目内容包装{
利润率：30%15%；
}
#项目-box-title1{
字体大小：1.3em；
颜色：#FFF；
}
#项目-box-title2{
字体大小：6.2米；
颜色：#FFF；
边缘顶部：20px；
}
#项目框说明{
字体大小：1.3em；
颜色：303030；
边缘顶部：50px；
线高：1.6em；
}
/*-----在项目页面上输入div----*/
.白绿色{
背景色：rgb（241250247）；
宽度：66.56%；
身高：100%；
左缘：33%；
右边距：0；
位置：绝对位置；
排名：0；
右：0；
}
.项目输入容器{
边缘顶部：160px；
左缘：9%；
}
.输入无边界{
宽度：80%；
边框顶部：0px；
边框底部：1px纯绿色；
右边框：0px；
左边框：0px；
背景色：rgb（241250247）；
文字装饰：无；
大纲：无；
显示：块；
填充：10px0；
利润率：20px0；
字号：1.6em；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.箭盒{
宽度：100%；
高度：400px；
}
.arrow\u box:之后，.arrow\u box:之前{
最高：100%；
左：50%；
}
.箭头框：在{
边框颜色：rgba（136183213,0）；
边框顶色：rgb（69186149）；
边框宽度：30px；
左边距：-30px；
}
.箭头框：在{
边框颜色：rgba（1942252450）；
边框顶色：rgb（69186149）；
边框宽度：36px；
左边距：-36px；
边际上限：0；
}
#项目内容包装{
利润率：10%5%；
}
#项目-box-title1{
字体大小：1.1米；
颜色：#FFF；
}
#项目-box-title2{
字体大小：3.2米；
颜色：#FFF；
边缘顶部：20px；
}
#项目框说明{
字体大小：1.1米；
颜色：303030；
边缘顶端：40px；
线高：1.6em；
}
/*-----在项目页面上输入div----*/
.白绿色{
背景色：rgb（241250247）；
宽度：100%；
高度：