为什么 div 保证金不计算为直接 parent

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 开发工具）确保白色 space 是由于 .page-inside，而不是 header 或 .page.

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

Answer 1

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

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

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>

为什么 div 保证金不计算为直接 parent

why div margin not calculated towards direct parent

html

css

margin