设置文章标签内页边距影响版块边距

我造型的布局是这样的：

我有一个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，它会影响其父section的margin-top。但是，它的工作原理，当我插入 或页面section和article这样之间的任何字符：

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

Here's jsfiddle

所以我不知道是什么问题？

CSS：

section.page-container, section.page { 
    display: block; 
    width: 100%; 
} 

section.page-container { 
    position: absolute; 
    padding:0; 
    top: 0; 
    left: 0; 
    background-color: blue; 
} 

section.page { 
    position: relative; 
    background-color: red; 
} 

section.page > article { 
    position: relative; 
    display: block; 
    width: 700px; 
    height: 600px; 
    overflow: visible; 
    background-color: rgba(0, 0, 0, 0.2); 
    margin-top: 50px; 
}

来源

2015-11-13 Arash DaneshAraste

出现这种情况的，因为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。

来源

2015-11-13 00:33:14

设置文章标签内页边距影响版块边距

回答

相关问题