Issue
MDN explains collapsed margin here.
These are the basic 3 rules it explains:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
Parent and first/last child
If there is no border, padding, inline content, 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.
Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Query a: I need to understand the 3 rules that are applied in which sequence in the example below.
Query b: If for empty block element margins collapse, then it occurs as top or bottom margin for it ? You might say what difference it makes but then if I use outline as in example below, here it seems as if it is collapsed as top.
Basically I have 3 <p> elements in which middle one is empty.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ex1</title>
<style>
body{
border: 1px solid black;
}
p{
margin-top: 10px;
margin-bottom: 10px;
outline: 1px solid black;
}
#empty{
margin: 20px;
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
<p id ='empty'></p>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
</body>
</html>Note that the final margin between the first and last paragraph is 20px.
Solution
The margins of #empty collapse through, resulting in a 20px collapsed-through margin. This collapsed-through margin collapses with the 10px bottom margin of the first paragraph, and the 10px top margin of the last paragraph. This results in a 20px gap between the first and last paragraphs, since the collapsed-through margin is larger than either of their margins and therefore swallows them both.
Your observation is correct: #empty, when its collapsed through, is rendered with its top margin. From the spec:
- [...] The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
The position that "would have been if the element had a non-zero bottom border" is the position of the element if the element's margins did not collapse through, since having a non-zero bottom border blocks the margins from collapsing through.
Answered By - BoltClock
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.