具有100vh的元素之間的垂直間距

Question

具有height:100vh的幾個元素時，它們在包含元素時顯示垂直間距。

<section> 
    <p>A</p> 
</section> 
<section> 
    <p>B</p> 
</section> 

隨着造型：

section { 
    height:100vh; 
} 

您可以瑟的example here，黃色的背景是每個元素以上可見，即使該部分的頁邊距設置爲0。

如何間距可以移除嗎？

Answer 1

只需添加overflow:auto;到.content>section

.content>section { 
height: 100vh; 
margin: 0; 
overflow:auto; 
} 

或者，您可以從所有元素中刪除邊距，但必須將邊距和填充都編輯到可能需要它的元素。

* { 
    margin:0; 
    padding:0; 
} 

每個瀏覽器都將有一個默認的用戶代理樣式表，將一些利潤率增加，例如所有H1元素，所以你可以刪除它覆蓋了你所需要的元素，用戶代理樣式表的規則。

h1 { 
    margin:0; 
} 

您可以通過使用reset.css文件重置例如所有不同的瀏覽器默認margin和padding避免這些類型的問題。

Answer 2

這裏是工作示例。請改爲html，body with * in css rule。

* { 
    margin:0; 
    padding:0; 
} 

Answer 3

這是因爲h1和p標籤都有默認的保證金（或保證金崩潰）。

緣塌陷

頂部和塊的底部邊緣有時合併（摺疊）成單個裕量的大小是最大的邊緣結合成它的，被稱爲餘量摺疊行爲。通過Mozilla MDN

的jsfiddle-DEMO

你可以做這樣的去除保證金：

CSS：

h1, p { 
    margin:0; 
}