Shopify自定义板块样式问题求助：图标对齐、卡片高度及边距异常

问题概述 #

在Shopify自定义板块中遇到以下3个样式异常：

• Klarna与PayPal图标未对齐，且图标与标题间距过大；
• 行内卡片无法与最高卡片保持一致高度，即使内容完全相同仍有细微高度差；
• 卡片间边距导致板块外侧出现留白，无法与其他板块对齐。

修复后完整代码 #

<!-- Second Row Section -->
<style>
  .second-row-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2%; /* 用gap控制卡片间距，替代margin避免外侧留白 */
    align-items: stretch;
  }
  .second-row-cards .card {
    text-align: left;
    padding: 10px; /* 统一内边距，避免高度差 */
    width: calc(50% - 1%); /* 配合gap实现等分，无外侧留白 */
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1; /* 强制卡片填充容器高度 */
  }
  .second-row-cards .card-header {
    display: flex; /* 新增：确保垂直布局生效 */
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 5px;
  }
  .second-row-cards .icons-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px; /* 缩小图标与标题的间距 */
  }
  .second-row-cards img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle; /* 修复SVG垂直对齐问题 */
  }
  .second-row-cards .caption-2 {
    font-weight: 450;
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
  }
  .second-row-cards .body-4 {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
  }
</style>

<div class="second-row-cards">
  <div class="card">
    <div class="card-header">
      <div class="icons-row">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Klarna_813785f1-282e-4f5e-840b-745585bc4815.svg?v=1723572724" alt="Bezahlung über Klarna">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_PayPal.svg?v=1723551376" alt="Bezahlung über PayPal">
      </div>
      <p class="caption-2">Bequem auf Rechnung</p>
    </div>
    <p class="body-4">Bezahle bequem auf Rechnung mit PayPal oder Klarna</p>
  </div>
  <div class="card">
    <div class="card-header">
      <div class="icons-row">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Calendar_filled.svg?v=1723570827" alt="Rückgaberecht">
      </div>
      <p class="caption-2">30 Tage Rückgaberecht</p>
    </div>
    <p class="body-4">Risikofrei dank Zufriedenheitsgarantie</p>
  </div>
</div>

问题截图 #

修复细节说明 #

1. 图标对齐与间距调整

• 为.card-header添加display: flex，确保内部垂直布局规则生效；
• 缩小.icons-row的margin-bottom值，拉近图标与标题的距离；
• 给图片添加vertical-align: middle，解决SVG因自身 viewBox特性导致的垂直偏移问题。

2. 卡片高度统一

• 将卡片padding改为统一的10px，避免顶部无内边距导致的高度差；
• 为.card添加flex: 1，强制flex容器内的卡片自动填充剩余空间，确保高度完全一致。

3. 消除外侧留白

• 移除.card的margin: 1%，改用.second-row-cards的gap: 2%控制卡片间距；
• 将卡片宽度调整为width: calc(50% - 1%)，配合gap实现无外侧留白的等分布局；
• 移除.second-row-cards中冗余的margin: 0px 0设置。

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