能否为着陆页设置通用左右内边距？背景色差异问题求解

• 直接给每个区块设置内边距
  不用给整个页面加内边距，直接给每个带背景色的区块设置padding-left和padding-right（或者用更简洁的padding-inline: Xpx;）。CSS里元素的内边距属于自身盒模型范围，会直接继承该区块的背景色，完全不会出现页面背景色外露的问题。示例代码：

  .section {
    padding-inline: 2rem; /* 统一设置左右内边距 */
  }
  .section--blue {
    background-color: #2563eb;
  }
  .section--gray {
    background-color: #f3f4f6;
  }
  

• 嵌套容器统一控制
  要是想统一管理内边距数值，避免重复代码，可以在外层区块（负责背景色）里嵌套一个内层容器（负责内边距）。外层区块占满宽度并设置背景，内层容器控制左右内边距，内容放在内层中。示例代码：

  .section {
    width: 100%;
  }
  .section__content {
    padding-inline: 2rem;
  }
  .section--blue {
    background-color: #2563eb;
  }
  

  对应HTML结构：

  <section class="section section--blue">
    <div class="section__content">
      <!-- 区块内容 -->
    </div>
  </section>
  

• 用CSS变量统一内边距值
  如果需要灵活调整全局内边距，可通过CSS变量定义统一值，再在每个区块中引用，既保证一致性又方便后续修改。示例代码：

  :root {
    --section-padding-inline: 2rem;
  }
  .section {
    padding-inline: var(--section-padding-inline);
  }
  .section--blue {
    background-color: #2563eb;
  }
  

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