-
201505 May
The CSS Working Group has reached an impasse on the issue of percentage margins (and padding) in flex and grid layout, and needs your input to help decide it.
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.
-
Comments
-
01.
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.
-
02.
.g {
background: #FF9999;
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 */
padding: 15px;
}
-
01.
