Question

首先抱歉我的英语不好。

我正在以这种方式设计样式：

我有section，其中包含类名page-container，其中包含页面。它使用javascript滑动页面。内部页面容器section我有其他部分代表每个页面，每个部分都包含一个article作为页面内容。

<section class="page-container">
    <section id="homepage-pg" class="page">
        <article>
            <header></header>
            <p></p>
        </article>
    </section>
    ...
</section>

问题是，当我为这些标记设置样式并为margin-top设置article时，它会影响其父margin-top的{{1}}。但是当我在页面section和 之间插入section或任何字符时，它会起作用：

article

Here's jsfiddle

所以我想知道这是什么问题？

CSS：

<section class="page-container">
    <section id="homepage-pg" class="page">
        &nbsp; or any characters here!!!
        <article>
            <header></header>
            <p></p>
        </article>
    </section>
    ...
</section>

Answer 1

这是因为margins are collapsing。

Box Model 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

当两个或多个边距折叠时，生成的边距宽度是折叠边距宽度的最大值。在负边距的情况下，负邻接边距的绝对值的最大值从正邻接边距的最大值中减去。如果没有正边距，则相邻边距的绝对值的最大值将从零中扣除。

一种可能的解决方法是将父元素的overflow值更改为visible以外的值。添加overflow: hidden有效。

Updated Example

section.page {
    position: relative;
    background-color: red;
    overflow: hidden; /* Added.. */
}

这是我在上面链接的文档中指定的规则之一：

建立新块格式化上下文的元素的边距（例如浮点数和'溢出'除'可见'之外的元素）不会因其流入的子节点而崩溃。 [link]

有关更多解决方法，请查看the documentation。

在某个部分内设置文章标签边距会影响部分的边距

1 个答案: