CSS：更改部分大小

Question

我的网页有问题，我的最后一部分和我的号召性用语之间存在巨大差距。你怎么解决的？ 谢谢支持！

这是证书部分的 HTml。我认为问题出在 CSS 中，但我认为如果我添加 HTML，参考会更好。

<section class="certificado">
<h1>Nuestras certificaciones</h1>
<div class="row">
    <div class="certificado-col">
        <img src="fotos/certificado_ISO.jpg" id="ISO">
        <div>
             <h4><br>
                <br>
                <br>
                <br>Estamos certificados con el sistema<br><h4/>
        </div>
    </div>
</div>
</section>

这是号召性用语的部分，效果很好。

<section class = "cta">
    <h1>Nos encantaría trabajar contigo</h1>
         <a href="" class="hero-btn">Cotiza tu proyecto con nosotros</a>
</section>

这就是 CSS，魔法应该发生的地方。但这在最后一部分和号召性用语之间存在巨大差距。

.certificado{
    width: 100%;
    height: 10%;
    margin: auto;
    padding-top: 80px;
    text-align: center;
    display: auto;
}
.certificado-col{
    flex-basis: 10%;
    border-radius: 10px;
    margin-bottom: 1%;
    margin-left: 10%;
    text-align: left;
    padding: 30px;
    cursor: default;
    display: flex;
  
}
.certificado-col img{
   height: 50%;
   width: auto;
   border-radius: 20%;
   
}
.certificado-col p{
    padding: 0;
}
.certificado-col h3{
    margin-top: 15px;
    text-align: left;
}

这是号召性用语部分。它工作完美，但距离最后一部分太远，也许问题可能出在这里。

.cta{
    margin: 100px auto;
    width: 80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(fotos/closing\ deal.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}
@media (max-width: 700px){
    .cta h1{
        font-size: 24px;
    }
}

这是两部分之间间隙的图像

Answer 1

浏览器的开发者工具是一个方便使用的工具。它显示两个部分之间的空间由

div.certificado-col

中的填充和

section.cta

中的上边距组成。

如果从“cta”中去掉100px的块边距，间距是否足够？
（之前/之后）

.cta {
  margin: 100px auto;
}

.cta {
  margin: auto;
}

.certificado{
    width: 100%;
    height: 10%;
    margin: auto;
    padding-top: 80px;
    text-align: center;
    display: auto;
}
.certificado-col{
    flex-basis: 10%;
    border-radius: 10px;
    margin-bottom: 1%;
    margin-left: 10%;
    text-align: left;
    padding: 30px;
    cursor: default;
    display: flex;
  
}
.certificado-col img{
   height: 50%;
   width: auto;
   border-radius: 20%;
   
}
.certificado-col p{
    padding: 0;
}
.certificado-col h3{
    margin-top: 15px;
    text-align: left;
}

.cta{
    margin: auto;
    width: 80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(fotos/closing\ deal.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}
@media (max-width: 700px){
    .cta h1{
        font-size: 24px;
    }
}

<section class="certificado">
<h1>Nuestras certificaciones</h1>
<div class="row">
    <div class="certificado-col">
        <img src="fotos/certificado_ISO.jpg" id="ISO">
        <div>
             <h4><br>
                <br>
                <br>
                <br>Estamos certificados con el sistema<br></h4>
        </div>
    </div>
</div>
</section>
<section class = "cta">
    <h1>Nos encantaría trabajar contigo</h1>
         <a href="" class="hero-btn">Cotiza tu proyecto con nosotros</a>
</section>