H1在Chrome中似乎沒有邊距頂部

這是我的HTML代碼。H1在Chrome中似乎沒有邊距頂部

<html> 
<head> 
<title>Foo</title> 
<style> 
body { 
    margin: 0; 
} 
</style> 
</head> 
<body> 
<main> 
<h1>Foo</h1> 
<p>Bar</p> 
</main> 
</body> 
</html>

以下是在macOS 10.12.6上的Chrome 61.0.3163.100上的輸出。

你可以看到輸出的行爲如同<h1>元素的margin-top是0。但盒子模型顯示了21.440的餘量。

Firefox的輸出看起來不錯。

來源

2017-10-08 Lone Learner

您不使用DOCTYPE，並在那裏quirks mode你永遠希望。在您的第一行添加適當的文檔類型，將自己置於「標準模式」，問題就會消失。

<!DOCTYPE html>

來源

2017-10-08 14:45:13 Rob

-1

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

垂直邊距的崩潰是內置Chrome瀏覽器放在你身上保證金更爲重要比Firefox一樣，並用自己的風格爲更高的優先級。

爲了避免整個摺疊邊距問題，您可以改爲在每個文本元素上使用display-block和padding-bottom而不是邊距。

來源

2017-10-08 11:58:16

我必須道歉，我把你的問題弄錯了。當沒有通過邊界或填充分開時，父母和孩子的利潤率會崩潰，只有更大的利潤率超出父母的邊界。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

家長和第一/最後一個孩子：如果沒有邊框，填充，內嵌部分，塊格式化上下文中創建或間隙從分離塊的邊距其第一個孩子塊的邊緣頂部;或將邊框，填充，內嵌內容，高度，最小高度或最大高度用於將塊的頁邊距底部與其最後一個子頁面的頁邊距底部分開，然後這些頁邊距將摺疊。母公司以外的摺疊保證金餘額爲。

這些規則適用甚至是零邊距，所以第一/最後一個孩子的保證金其父之外結束（根據上述規則）母公司的保證金是否是零。

如果父母的保證金爲0，則摺疊的保證金將與下一個父保證金摺疊。請看下面的例子：

的例子顯示了這一點：

<html> 
<head> 
<body> 
<main> 
<h1>Foo</h1> 
<p>Bar</p> 
</main> 
</body> 
</html>

前三「的Foo」主要有8像素的邊距，它與H1的默認保證金崩潰並且結果邊距從html邊框到主邊框。

在接下來的兩個「foos」中，main的margin是0，所以margin與body一起崩潰並且超出了html邊界。

這就是鉻發生了什麼，它適用於默認代理用戶樣式：

-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em;

與身體保證金崩潰，去的HTML境外。

Firefox看起來行爲不同，如果您刪除主標籤，h1的邊框就會像Chrome一樣超出html的範圍，但以main作爲父級（儘管有0邊距），它不會發生。我一直在尋找瀏覽器的樣式，但我找不到任何解釋，我只能說瀏覽器的行爲有所不同。

對不起，如果我的解釋不是最好的，這是一個複雜的問題，並感謝它爲它調查很有趣。

閱讀有關崩潰邊緣：

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

來源

2017-10-08 14:08:54 MarioZ

H1在Chrome中似乎沒有邊距頂部

回答

相關問題