H1 appears to have zero margin-top in Chrome
Question
Here is my HTML code.
<html>
<head>
<title>Foo</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<main>
<h1>Foo</h1>
<p>Bar</p>
</main>
</body>
</html>
Here is the output on Chrome 61.0.3163.100 on macOS 10.12.6.
You can see that the output behaves as if margin-top of the <h1> element is 0 . But the box model shows a margin of 21.440.
The output looks okay on Firefox.
2 answers
solution1
4 ACCPTED 2017-10-08 14:45:13
You aren't using a doctype and are in quirks mode where you never want to be. Add a proper doctype on your first line, to put yourself in "standards mode" and the problem goes away.
<!DOCTYPE html>
solution2
0 2017-10-08 14:08:54
I must apologize, I got your question wrong. When no separated by border or padding, parent and child margins collapse, and only the bigger margin prevails outside the parent's border.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Parent and first/last child: If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
If the parent's margin is 0, then the collapsed margin collapses with the next parent margin. Look at this example:
The example shows this:
<html>
<head>
<body>
<main>
<h1>Foo</h1>
<p>Bar</p>
</main>
</body>
</html>
In the first three "foos" main has a margin-top of 8px, it collapses with the default margin of h1 and the result margin goes from the html border to the main border.
In the next two "foos" the margin of main is 0, so the margin collapses with body and goes outside the html border.
That's what happens in chrome, it applies a default agent user style:
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
That collapses with the body margin and goes outside the html border.
Firefox seems to behave different, if you remove the main tag the border of h1 goes outside the html like in Chrome, but with main as parent (though with 0 margin) it doesn't happen. I've been looking the Browser's styles but I can't find anything that explains, I can only say that browsers behave different.
Sorry if my explanation is not the best, it's a complicated issue, and thanks for bringing it for it was fun to investigate.
Reading about collapsing margins:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.