CSS网格布局问题：右侧模块titulo与texto间距过大如何修复

问题说明 #

页面左右两侧需保持一致的网格布局，但右侧.valores-dir模块中，.titulo-valores（标题）与.texto-valores（文本）之间出现较大空白间距，推测与.imagem-dir的布局逻辑有关，缩小文本字号无法解决问题，需实现文本贴近标题且位于图片左侧的效果。

原始代码 #

HTML代码 #

<div class="setor-valores">
        <div class="valores-esq">
            <img src="../assets/images/cp/sobre-cid-1.jpg" alt="sobre-cidade1" class="imagem-esq">
            <br><br>
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>

        <div class="valores-dir">
            <img src="../assets/images/cp/sobre-cid-2.jpg" alt="sobre-cidade2" class="imagem-dir">
            <br><br>
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>

        <div class="valores-esq">
            <img src="../assets/images/cp/sobre-cid-3.jpg" alt="sobre-cidade3" class="imagem-esq">
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>
    </div>

CSS代码 #

.valores-esq {
    display: grid;
    gap: calc(10px + 3vw);
    grid-template-areas: 
    'imagem imagem titulo titulo'
    'imagem imagem texto texto';
    margin-right: 10vw;
    row-gap: 1px;
    text-align: left;
}

.valores-dir { /* PROBLEM HERE */
    display: grid;
    grid-template-areas: 
    'titulo titulo imagem imagem'
    'texto texto imagem imagem';
    text-align: left;
    margin-left: 5vw;
}

.imagem-esq {
    grid-area: imagem;
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 100% 0;
    border-radius: 0px 30px 30px 0px;
}

.imagem-dir { /* PROBLEM HERE */
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 0 100%;
    border-radius: 30px 0px 0px 30px;
}

.titulo-valores {
    grid-area: titulo;
    font-family: Martel;
    font-size: 20px;
}

.texto-valores {
    grid-area: texto;
    font-family: Martel;
    font-size: 15px;
}

问题根源 #

1. .valores-dir未设置row-gap和统一的gap值，与左侧布局参数不一致
2. .imagem-dir未指定grid-area: imagem，网格无法正确识别图片占位区域，导致文本区域被图片高度撑开
3. HTML中多余的<br><br>会额外增加间距
4. 段落标签默认的margin会拉大标题与文本的距离

修复后的代码 #

修改后的HTML #

<div class="setor-valores">
    <div class="valores-esq">
        <img src="../assets/images/cp/sobre-cid-1.jpg" alt="sobre-cidade1" class="imagem-esq">
        <p class="titulo-valores">Liberdade</p>
        <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
    </div>

    <div class="valores-dir">
        <img src="../assets/images/cp/sobre-cid-2.jpg" alt="sobre-cidade2" class="imagem-dir">
        <p class="titulo-valores">Liberdade</p>
        <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
    </div>

    <div class="valores-esq">
        <img src="../assets/images/cp/sobre-cid-3.jpg" alt="sobre-cidade3" class="imagem-esq">
        <p class="titulo-valores">Liberdade</p>
        <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
    </div>
</div>

修改后的CSS #

.valores-esq {
    display: grid;
    gap: calc(10px + 3vw);
    grid-template-areas: 
    'imagem imagem titulo titulo'
    'imagem imagem texto texto';
    margin-right: 10vw;
    row-gap: 1px;
    text-align: left;
}

.valores-dir {
    display: grid;
    gap: calc(10px + 3vw); /* 和左侧统一gap参数 */
    grid-template-areas: 
    'titulo titulo imagem imagem'
    'texto texto imagem imagem';
    text-align: left;
    margin-left: 5vw;
    row-gap: 1px; /* 添加行间距，与左侧保持一致 */
}

.imagem-esq {
    grid-area: imagem;
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 100% 0;
    border-radius: 0px 30px 30px 0px;
}

.imagem-dir {
    grid-area: imagem; /* 指定网格区域，让布局逻辑生效 */
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 0 100%;
    border-radius: 30px 0px 0px 30px;
}

.titulo-valores {
    grid-area: titulo;
    font-family: Martel;
    font-size: 20px;
    margin: 0; /* 移除段落默认margin */
}

.texto-valores {
    grid-area: texto;
    font-family: Martel;
    font-size: 15px;
    margin: 0; /* 移除段落默认margin，让文本贴近标题 */
}

修复效果 #

• 右侧模块标题与文本的间距和左侧完全一致，无多余空白
• 文本正确位于图片左侧，网格布局逻辑统一
• 移除了冗余的换行和默认间距，实现文本贴近标题的需求

内容的提问来源于stack exchange，提问作者user92837