为什么div的margin不会计算直接父元素？

Question

为什么div的margin不会计算直接父元素？

3

我正在学习基本的CSS练习。我想让网页的标题布局看起来像这样：宽顶部边距。

我的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（黑色背景保留）之间有30像素的距离。因此我添加了那个外边距，但是我得到的是从.page-inside向.header方向的30像素距离，效果如图所示：broken top margin。我已经通过Chrome开发者工具确认，白色空间是由.page-inside而非header或.page引起的。

我知道我可以只向.page-inside或者.row-items中的任意一个添加内边距，但是我相信添加该外边距也应该能够起作用。我的理解有什么问题吗？

- sulai_x

2

这个回答解决了你的问题吗？ - Debsmita Paul

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tanner Dolby · Accepted Answer

在CSS中，margin会为元素创建空间。当你将margin: 30px auto添加到.page-inside容器中时，你会在.page-inside容器的内容周围添加30像素的上下"空间"。这就是导致.page和导航栏之间有30像素白色空间的原因。发生这种情况的原因是因为.page-inside是父容器.page的第一个子元素，在.page-inside div之前没有任何正常流程中的内容。因此，给.page-inside设置margin: 30px auto实际上与给.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>