設置文章標籤內頁邊距影響版塊邊距

我造型的佈局是這樣的：

我有一個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

設置文章標籤內頁邊距影響版塊邊距

回答

相關問題