为啥当我在另一个 div 的 div 上放置一个 margin-top 时，BODY 也会接受它？ [复制]

Posted 2023-03-06

【中文标题】为啥当我在另一个 div 的 div 上放置一个 margin-top 时，BODY 也会接受它？ [复制]

【英文标题】：Why when i put a margin-top on a div on the other one the BODY takes it too? [duplicate]为什么当我在另一个 div 的 div 上放置一个 margin-top 时，BODY 也会接受它？ [复制]

【发布时间】：2016-02-18 00:29:20

【问题描述】：

我不明白为什么当我将 margin-top 放在 class="container" 时，margin-top 是由所有 div class="navbar-fixed z-depth-0 blue" 标记的

.navbar-fixed 
    height: 200px;


.col.s12.a 
    left: 0;
    right: 0;


#cnt
    margin-top:50px; 

    <div id="nav" class="navbar-fixed z-depth-0 blue">
        <div id="cnt" class="container">
            <div class="row">
                <div class="col l6" style="border:1px solid black">
                    <h4>aaa</h4>
                </div>
                <div class="col l6" style="border:1px solid black">
                    <h4>ss</h4>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

边距折叠w3.org/TR/CSS21/box.html#collapsing-margins

我强烈怀疑你是保证金崩溃的受害者。

只是为了笑，给你的外部容器一个边框，看看会发生什么。

@zzzzBov 我必须成为一辈子的受害者，还是有解决办法？ :D

@J.arc 将填充物放在身体上而不是外包装上的边距？

【参考方案1】：

您拥有的是collapsed margins。在您的特殊情况下，您可以在#nav 上放置填充，而不是在#cnt 上放置边距：

#nav  padding-top: 50px;