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

Posted 2023-03-06

【中文标题】为啥不针对直接父级计算 div 边距 [重复]

【英文标题】：why div margin not calculated towards direct parent [duplicate]为什么不针对直接父级计算 div 边距 [重复]

【发布时间】：2021-06-14 10:52:49

【问题描述】：

我正在练习基本的 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 添加填充，但我相信添加边距也应该有效。我的理解有什么问题？

【问题讨论】：

this 回答你的问题了吗？

【参考方案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>

【讨论】：

很好的解释。如果我在.page-inside 上方添加一个随机 div，则边距按预期工作。从上面保罗指出的另一篇文章中，将padding-top:1px; margin-top:-1px; 添加到.page 也解决了这个问题。谢谢