WordPress Divi主题图片容器底部留白问题求助

问题背景 #

在WordPress使用Divi主题制作2行4列的锯齿形交替布局（图片与文本交替）：

添加图片后发现图片所在div容器高度大于图片本身，底部出现多余留白，导致布局混乱。已尝试height: 100%;、margin/padding: 0;、box-sizing: border-box;（含/不含!important）均无效，希望通过CSS解决，不使用JavaScript。

使用方式：通过Divi代码模块编写HTML，在WordPress外观>自定义>额外CSS中编写CSS。

现有代码 #

HTML代码 #

<section>
    <div class="grid-container">
    <div class="grid-img-1">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapes.svg">
    </div>
    <div class="grid-img-2">
      <img src="/wp-content/uploads/2023/05/PC-grid-barrels.svg">
    </div>
    <div class="grid-img-3">
      <img src="/wp-content/uploads/2023/05/PC-grid-pouring.svg">
    </div>
    <div class="grid-img-4">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapefield.svg">
    </div>
    <div class="grid-link-1"></div>
    <div class="grid-link-2"></div>
    <div class="grid-link-3"></div>
    <div class="grid-link-4"></div>
  </div>
</section>

CSS代码 #

/* Card grid */

.grid-container {
    display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
  grid-auto-flow: row;
}

.grid-img-1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-img-2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-img-3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-img-4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid-link-1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-link-2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-link-3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-link-4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
}

解决方案 #

图片底部留白通常是行内元素基线对齐特性导致，结合Divi主题默认样式干扰，可通过以下CSS修复：

1. 强制图片容器贴合内容：

.grid-img-1, .grid-img-2, .grid-img-3, .grid-img-4 {
    margin: 0;
    padding: 0;
    display: block;
}

2. 修正图片对齐方式，消除基线间隙：

.grid-container img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

3. 调整网格行高为自适应内容：
   原CSS中固定百分比行高会强制拉伸容器，改为自动适应内容：

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row;
}

将以上代码添加到WordPress外观>自定义>额外CSS中即可生效。

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