We’ve got a bit of a tricky question on expected behavior of multi-column layout for you folks.
First, I want you to imagine a multi-column element. Like this one:

Now suppose that you want to use a column-spanning element. Column-spanning elements stretch across the entire multi-column element. Content before one balances into a short row of columns before it, and content after it continues in another row of columns after it. Like this:

Next, suppose you place two spanning elements, one after the other, like this:

Finally, suppose you gave each spanner a 1em vertical margin on both sides (
In your ideal world, is there a 1em or 2em gap between the two elements?
Post your thoughts in the comment section, and we’ll forward them to the CSS Working Group.
First, I want you to imagine a multi-column element. Like this one:
Now suppose that you want to use a column-spanning element. Column-spanning elements stretch across the entire multi-column element. Content before one balances into a short row of columns before it, and content after it continues in another row of columns after it. Like this:
Next, suppose you place two spanning elements, one after the other, like this:
Finally, suppose you gave each spanner a 1em vertical margin on both sides (
margin: 1em 0
).
Remember that vertical margins between normal block-level elements
collapse (so there would be only 1em gap between the two) whereas
margins between stacked floating elements do not collapse (so there
would be a 2em gap between the two).In your ideal world, is there a 1em or 2em gap between the two elements?
Separate Margins (2em Gap) | Collapsed Margins (1em Gap) |
---|---|
No comments:
Post a Comment