Collapsed margin in CSS
MDN explains collapsed margin here.
These are the basic 3 rules it explains:
Adjacent siblings
The margins of adjace
-
Query a: I need to understand the 3 rules that are applied in which sequence in the example below.
The sequence doesn't matter much as long as rules are not declared many times for the same selector with different value.
border on body, will keep the verical margin from first and last child inside itself.
empty paragraph has 0 height, margins will collapse/merge with previous and next sibblings, it will act as if it was not there. Add 1px of height to test behavior:
See snippet below
<!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; height:1px; } </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>In my own Humble opinion, if an element is not drawn (height = 0 = null ), then outline should not be drawn either even when
displayis not set tonone.
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.
Somehow with an height of 0 and no Block formatting context reset, the browser will still try its best to draw this outline when the element is actually drawn nowhere. it will draw the outline from top margin value where the element would stand if drawn.
SEE snippet below where BFC is triggered
<!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; /* reset BFC see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context*/ display: table; /* overflow:hidden; resets also the BFC read the link provided to start understands how this works :) */ } </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>讨论(0) -
The margins of
#emptycollapse 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.
讨论(0)
加载中...
- 热议问题