Option 1: Flex and grid items resolve percentages in margin-top and margin-bottom against the height of the element’s containing block.
Option 2: Flex and grid items resolve percentages in margin-top and margin-bottom against the width of the element’s containing block.
Option 1 makes vertical margins consistent with horizontal margins (which resolve percentages against the width of the element’s containing block). This is a theoretically simpler model, and works well with Flexbox and Grid’s dimension-agnostic layout concepts. However, it is inconsistent with CSS block layout, and causes the margins to collapse to zero when used in an auto-height container.
Option 2 is consistent with the behavior of vertical margins in block and table layout. It has usable behavior in auto-height boxes, and enables the “aspect ratio hack”. However, it is a less obvious behavior, and means the layout interactions change based on whether a flexbox is “row” or “column”.
(For more background, see discussion on www-style.)
We’re looking for comments from authors explaining which behavior they think is better for Flex and Grid layout, and why. Do you have use-cases that can only be achieved with one behavior or the other? Show us!
You can skip to the end and leave a response.
Using flexbox as enhancement to a thumbnail gallery, coded with inlline-blocks for legacy browsers, the disappearance of top and bottom margins is inconsistent with the inline-block behavior. Except on Chrome, that is. :)
Not a major problem, as using absolute length units for margins/padding does not cause the same problem that it does on floats or inline-blocks. Still, consistency would be nice, I think.
border: 8px solid transparent;/* you may tune individually border-size to get your 15px */
box-shadow:inset 0 0 0 1px red;/* this will fake your border if set with out blur */
background-clip:padding-box;/* do not show bgcolor under borders */
border-radius: 15px;/* increase value so it has effect deeper seen on inset box-shadow */