CSS容器margin未正确生效：section间距异常求助

我在使用CSS的margin属性时遇到问题：给每个section标签设置不同背景色，所有内容放在section内的content-container类div中，期望由该div控制内容边距，同时让section标签紧密贴合。但实际效果是margin作用在section上导致它们分离，此前在其他项目中可行，本次却出现异常，求问原因及优化写法。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
  <body>
    <main class="card-container">
      <section class="sec-1">
        <div class="content-container">
          <h1>Join our community</h1>
          <h3>30-day, hassle-free money back guarantee</h3>
          <p>Gain access to our full library of tutorials along  with expert code reviews. 
          Perfect for any developers who are serious about honing their skills.</p>
        </div>
      </section>
      <section class="sec-2">
        <div class="content-container">
          <h2>Monthly Subscription</h2>
          <p>$29 per month</p>
          <p>Full access for less than $1 a day</p>
          <div class="btn-container">
            <button>Sign Up</button>
          </div>
        </div>
      </section>
      <section class="sec-3">
        <div class="content-container">
          <h2>Why us</h2>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </section>
    </main>
</body>
</html>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Karla', sans-serif;
    color: #fff;
    background-color: hsl(204, 43%, 93%);
}

.card-container {
    margin: 0 2rem;
}

.content-container {
    margin-bottom: 2rem;
}

.sec-1 {
    background-color: #fff;
    color: black;
}

.sec-2 {
    background-color: hsl(179, 62%, 43%);
}

.sec-3 {
    background-color: hsla(179, 62%, 43%, 0.806);
}

ul {
    list-style: none;
}

当前效果 #

期望效果 #

问题原因 #

这是**外边距折叠（Margin Collapse）**导致的：当块级元素的上下外边距与父元素的上下外边距相邻时，会发生外边距合并，最终取两者中的较大值作为最终外边距。你给content-container设置了margin-bottom: 2rem，而它的父元素section没有设置内边距、边框或者overflow属性来阻断外边距折叠，所以这个margin会“穿透”到section元素上，导致section之间出现间距。

修复方案 #

方案1：给section添加内边距替代div的外边距

把content-container的margin改为section的padding，直接控制内容与section边缘的距离：

.content-container {
    /* 移除margin-bottom */
}

section {
    padding: 2rem;
    padding-bottom: 0;
}

section:last-child {
    padding-bottom: 2rem;
}

方案2：给section添加属性阻断外边距折叠

给section设置透明边框或overflow属性，让父元素与子元素的外边距不相邻：

section {
    border-top: 1px solid transparent;
    /* 或者使用 overflow: hidden; */
}

方案3：将div的margin改为padding

直接调整content-container的属性，用padding替代margin：

.content-container {
    padding: 2rem;
    padding-bottom: 0;
}

.content-container:last-child {
    padding-bottom: 2rem;
}

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