为什么不针对直接父级计算 div 边距 [重复]

Question

我正在练习基本的 CSS。我希望网页的标题布局如下所示： wide top margin.

我的html：

    <div class="header">
.
.
.
    </div>
    <div class="page">
        <div class="page-inside">
            <div class="row-apps">
                <div class="row-apps-item">
                    <img src="02.jpg" class="row-apps-img">
                    Kurikulum
                </div>
                <div class="row-apps-item">
                    <img src="03.jpg" class="row-apps-img">
                    Status Mahasiswa
.
.
.
                </div>
            </div>
        </div>
    </div>

还有 CSS：

.page {
    height: 1000px;
    padding: 0;
    background-color:rgb(31, 31, 31);
}

.page-inside {
    width: 1000px;
    margin: 30px auto;
}

.row-apps {
    padding: 10px;
    overflow: hidden;
}

.row-apps-item {
    color: rgb(57, 57, 207);
    width: 16.66%;
    float: left;
    padding: 5px 10px;
}

我打算让.page-inside 与内容主容器.page 有30px 的距离（保留黑色背景）。所以我添加了那个边距，但是我从.page-inside 到.header 得到了30px。它看起来像这样：broken top margin。我已经（通过 Chrome 开发工具）确保空白是由于 .page-inside 而不是 header 或 .page。

我知道我可以为.page-inside 或.row-items 添加填充，但我相信添加边距也应该有效。我的理解有什么问题？

Answer 1

在 CSS 中，margin 在元素周围创建空间。当您将 margin: 30px auto 添加到 .page-inside 容器时，您会在 .page-inside 容器内容周围添加 30px 的顶部和底部“空间”。这就是导致.page 和导航栏之间的 30px 空白的原因。发生这种情况的原因是因为.page-inside 是父容器.page 的第一个子容器，它在.page-inside div 之前的正常流程中没有任何内容。因此，将margin: 30px auto 赋予.page-inside 与将其赋予.page 基本相同，因为它们在文档中“处于同一起点”。

另一方面，padding 在元素内创建空间。如果你想将.page-inside 内的主要内容向下推30px，只需使用像padding: 30px 0 这样的填充。这将在 .page-inside 元素内创建 30px 的顶部和底部“空间”以及 0px 的左右空间。

body {
  margin: 0;
}

.page {
    height: 1000px;
    padding: 0;
    background-color:rgb(31, 31, 31);
}

.page-inside {
    width: 1000px;
    padding: 30px 0;
    max-width: 95ch;
    margin: 0 auto;
    /*margin: 30px auto;*/
}

.row-apps {
    padding: 10px;
    overflow: hidden;
}

.row-apps-item {
    color: rgb(57, 57, 207);
    width: 16.66%;
    float: left;
    padding: 5px 10px;
}

nav {
  background: hsl(0, 0%, 20%);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 90ch;
  padding: .5rem 1rem;
  color: #fff;
  margin: 0 auto;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}

nav ul li {
  padding: 0 .75rem;
}

<nav>
  <div class="row">
    <div>
      <span>Aplikasi</span>
    </div>
    <div>
      <ul>
        <li>ID</li>
        <li>EN</li>
        <li>Sulaiman</li>
      </ul>
    </div>
  </div>
</nav>
<div class="header">
    </div>
    <div class="page">
        <div class="page-inside">
            <div class="row-apps">
                <div class="row-apps-item">
                    <img src="02.jpg" class="row-apps-img">
                    Kurikulum
                </div>
                <div class="row-apps-item">
                    <img src="03.jpg" class="row-apps-img">
                    Status Mahasiswa

                </div>
            </div>
        </div>
    </div>