网页certificado板块与cta板块间距过大问题解决请求

我开发的网页中，certificado（证书）板块与cta（行动召唤）板块之间出现了巨大空隙，请求协助解决该布局问题。相关代码与问题说明如下：

相关代码 #

certificado板块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>

cta板块HTML代码 #

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

certificado板块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板块CSS代码 #

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

问题说明 #

截图显示certificado板块下方与cta板块之间存在明显的空白区域，破坏了页面的紧凑布局。

解决方案及修改说明 #

1. 修正certificado板块的核心CSS问题 #

.certificado{
    width: 100%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 40px; /* 新增：控制板块底部与下一个元素的间距 */
    text-align: center;
    /* 移除无效的display:auto和错误的height:10% */
}
.row {
    display: flex; /* 新增：让子元素正常使用flex布局 */
    justify-content: center; /* 可选：让内容居中，避免左对齐导致的空白 */
}
.certificado-col{
    flex-basis: 40%; /* 调整：原10%宽度过窄，导致内容布局异常 */
    border-radius: 10px;
    margin-bottom: 1%;
    /* 移除margin-left:10%，配合row的justify-content:center实现居中 */
    text-align: left;
    padding: 30px;
    cursor: default;
    display: flex;
    align-items: center; /* 新增：让图片与文字垂直居中，避免高度错位 */
}
.certificado-col img{
   height: 120px; /* 调整：固定图片高度，避免因图片尺寸导致的布局混乱 */
   width: auto;
   border-radius: 20%;
   margin-right: 20px; /* 新增：图片与文字之间添加间距，提升排版美观度 */
}

2. 修正HTML标签错误 #

将certificado板块中错误的<h4/>闭合标签改为标准的</h4>：

<div>
     <h4>
        <br>
        <br>
        <br>
        <br>Estamos certificados con el sistema<br>
    </h4>
</div>

3. 可选：调整cta板块的顶部间距 #

如果仍觉得空隙过大，可修改cta的margin值：

.cta{
    margin: 50px auto; /* 原100px改为50px，减少顶部空白 */
    /* 其他样式保持不变 */
}

修改原因 #

• 移除height:10%：父元素未设置明确高度时，百分比高度会导致元素高度计算异常，产生多余空白。
• 添加.row的display:flex：否则子元素的flex属性无法生效，布局混乱导致板块高度异常。
• 修正标签错误：避免HTML解析异常引发的布局问题。

内容的提问来源于stack exchange，提问作者Roldan Carrillo Hugo Alejandro