html - 为什么 div margin 不计算直接父级

Question

<分区>

Answer 1

在 CSS 中，margin在元素周围创建空间。当您将 margin: 30px auto 添加到 .page-inside 容器时，您会在 .page-inside 周围添加 30px 的顶部和底部“空间” > 容器内容。这就是导致 .page 和导航栏之间出现 30px 空白的原因。发生这种情况的原因是因为 .page-inside 是父容器 .page 的第一个子容器，它在 之前的正常流中没有任何内容.page-inside 分区。因此，将 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>