I have questions about collapsing margins at the following section and would like to ask for help:
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
In the section, it writes:
"Adjoining vertical margins collapse, except:
...
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
Later in the section, it writes:
"Horizontal margins never collapse."
"When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths"
I thought that vertical margins mean margin left and margin right because in 8.3 (https://www.w3.org/TR/CSS2/box.html#margin-properties), "vertical margins will not have any effect on non-replaced inline elements." is written, and above the description of margin-left and margin-right, "These properties have no effect on non-replaced inline elements." is written.
However, the section writes "Adjoining vertical margins collapse...If the top and bottom margins". I then thought that maybe there was a typo and "vertical margins" mean top and bottom margins, and "horizontal margins" mean left and right margins. However, later in the section, it writes "Horizontal margins never collapse." and "When two or more margins collapse, the resulting margin width...". If "Horizontal margins never collapse." means left and right margins never collapse, when two margins collapse, the collapse shouldn't change the margin width.
Could you please tell me in "Adjoining vertical margins collapse", whether or not vertical margins mean margin left and margin right?
If vertical margins mean margin left and margin right in the above question, could you please reply why following "Adjoining vertical margins collapse", it mentions "the top and bottom margins of an element"?
Could you also please explain why it writes "Horizontal margins never collapse.", but it also writes "If the top and bottom margins of an element with clearance are adjoining, its margins collapse" and "When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths"?
As far as the most up to date language that the group has resolved for margins and collapsing, I'd recommend reading the current draft.
https://drafts.csswg.org/css-box-3/#collapsing-margins
But more particularly, "vertical margins" refer to margin-top and margin-bottom. And with that understanding I think all your confusion could be cleared up. And when you say...
I thought that vertical margins mean margin left and margin right because in 8.3 (https://www.w3.org/TR/CSS2/box.html#margin-properties), "vertical margins will not have any effect on non-replaced inline elements." is written, and above the description of margin-left and margin-right, "These properties have no effect on non-replaced inline elements." is written.
The green text is referring to the previous properties described, margin-top/margin-bottom, like a footnote, along with the green text in the "percentage" paragraph above.
As far as the most up to date language that the group has resolved for margins and collapsing, I'd recommend reading the current draft.
Currently the draft refers to the definition in CSS 2.2 instead of incorporating that section. Can someone explain why?
Regarding the physical directions "vertical" and "horizontal", they probably need to be replaced by the logical "block" and "inline" directions to take the writing mode into account. User agents actually already do that, see https://jsfiddle.net/SebastianZ/3x9k6pmz/ as an example.
Sebastian
@SebastianZ Would you want to change the title of this issue to be about changing language around vertical margin collapsing from physical to logical/block? Seems like that's what is primarily up in the air here?
@SebastianZ Would you want to change the title of this issue to be about changing language around vertical margin collapsing from physical to logical/block? Seems like that's what is primarily up in the air here?
Unfortunately, I don't have the rights to do so, but yes, it should be changed.
Sebastian
Would you want to change the title of this issue to be about changing language around vertical margin collapsing from physical to logical/block? Seems like that's what is primarily up in the air here?
Unfortunately, I don't have the rights to do so, but yes, it should be changed.
Done.
Most helpful comment
Done.