如何仅用CSS实现相邻区块间内边距的规则化抵消？

针对你要实现的相邻区块内边距抵消规则，确实有更具扩展性的纯CSS选择器方案，核心思路是用相邻兄弟选择器结合自定义属性+属性选择器，精准匹配不同内边距的区块组合，避免硬编码具体数值，提升可维护性。

核心实现思路 #

• 给每个区块添加自定义属性--block-padding，用来定义自身的内边距值
• 通过属性选择器匹配相邻区块的内边距关系，动态调整上边距实现抵消规则：
  • 相邻区块内边距相同：抵消其中一个（即设置负的内边距值）
  • 相邻区块内边距不同：抵消较小的那个值

代码示例 #

HTML结构 #

<div class="block" style="--block-padding: 2rem;">区块1（2rem内边距）</div>
<div class="block" style="--block-padding: 2rem;">区块2（2rem内边距）</div>
<div class="block" style="--block-padding: 1.5rem;">区块3（1.5rem内边距）</div>
<div class="block" style="--block-padding: 3rem;">区块4（3rem内边距）</div>

CSS实现 #

/* 基础区块样式：内边距由自定义属性控制，默认保留下边距 */
.block {
  padding: var(--block-padding);
  margin-bottom: var(--block-padding);
  background: #f0f0f0;
}

/* 规则1：相邻区块内边距相同，抵消一个 */
.block[style*="--block-padding: "] + .block[style*="--block-padding: "] {
  margin-top: calc(-1 * var(--block-padding));
}

/* 规则2：相邻区块内边距不同，抵消较小值（按预设档位匹配） */
/* 预设常见内边距档位：1rem、1.5rem、2rem、3rem，可按需扩展 */
/* 小值在前，大值在后的情况 */
.block[style*="--block-padding: 1rem;"] + .block[style*="--block-padding: 1.5rem;"],
.block[style*="--block-padding: 1rem;"] + .block[style*="--block-padding: 2rem;"],
.block[style*="--block-padding: 1rem;"] + .block[style*="--block-padding: 3rem;"] {
  margin-top: -1rem;
}

.block[style*="--block-padding: 1.5rem;"] + .block[style*="--block-padding: 2rem;"],
.block[style*="--block-padding: 1.5rem;"] + .block[style*="--block-padding: 3rem;"] {
  margin-top: -1.5rem;
}

.block[style*="--block-padding: 2rem;"] + .block[style*="--block-padding: 3rem;"] {
  margin-top: -2rem;
}

/* 大值在前，小值在后的情况 */
.block[style*="--block-padding: 1.5rem;"] + .block[style*="--block-padding: 1rem;"],
.block[style*="--block-padding: 2rem;"] + .block[style*="--block-padding: 1rem;"],
.block[style*="--block-padding: 3rem;"] + .block[style*="--block-padding: 1rem;"] {
  margin-top: -1rem;
}

.block[style*="--block-padding: 2rem;"] + .block[style*="--block-padding: 1.5rem;"],
.block[style*="--block-padding: 3rem;"] + .block[style*="--block-padding: 1.5rem;"] {
  margin-top: -1.5rem;
}

.block[style*="--block-padding: 3rem;"] + .block[style*="--block-padding: 2rem;"] {
  margin-top: -2rem;
}

扩展性优化 #

如果不想硬编码档位，可以结合少量JS+CSS变量比较来实现完全动态的匹配，摆脱固定数值限制：

@supports (margin-top: min(var(--prev-padding), var(--current-padding))) {
  .block + .block {
    margin-top: calc(-1 * min(var(--prev-padding), var(--current-padding)));
  }
}

// 给每个区块设置前一个区块的内边距值
document.querySelectorAll('.block').forEach((block, index, blocks) => {
  if (index > 0) {
    const prevPadding = blocks[index-1].style.getPropertyValue('--block-padding');
    block.style.setProperty('--prev-padding', prevPadding);
    block.style.setProperty('--current-padding', block.style.getPropertyValue('--block-padding'));
  }
});

这种方案只需维护自定义属性，新增内边距值时无需修改CSS，扩展性拉满。

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