Join GitHub today
[css-box-3] child-contain: border-box; to resolve child margins at parents edge #2848
Countless times did I hit the same issue: I want to give child elements a margin all around them so they always keep distance from eachother. But I cant predict which children will border their partent containers edges, so I have no easy way of eliminating the margin where children are side to side with their parent.
Yes I could give the parent a negative margin and hide overflow, but that will only work if all children have the same margin, otherwise I pull content out of the partent too far or not far enough.
I could try to mess around with a calculated with, but that again often requires me to know with element will be dispalyed where, which especially on responsive designs I often can not predict.
Could we look into one simple property just for this problem.
meaning contain any child by its borders, but let the margins overflow. Default would me contain margin-box. And when we are add it it makes sense to consider contain padding-box and contain content-box;
Could we draft this?
I originally considered calling this property contain: , but it seems that same name has already been applied to another property in candidate release, where the name is rather vaguely related to what that property does. Too bad. child-contain will do, as it clearly indicates what is being contained, followed by a value of how it is being contained.
...usually covers all cases for me.
Ah, Flexbox (and Grid) have this already solved, then. If you use the
(Note that gaps aren't implemented for Flexbox yet, but they will be.)
Does this solve your problem?
It might solve my problem, however would it not make more semantic sense to have a property which may be applied on any element?
not sure if
When gap is introduced, the issue has been addressed for flex boxes, but why not introduce a more general property which may apply on all relatively or statically positioned elements?
Because other layout systems have different constraints, and the problems are different. ^_^ In particular, margin collapsing and floats end up making it very complex to add the equivalent of 'gap' to block layout, much more so than it is in Flexbox or Grid. Note that, for example,
Furthermore, the use cases of Block layout (laying out text, generally) don't really call for that type of control over separation between children; if that's the sort of thing you need to be doing, you probably want to switch to a layout mode more specialized for your problem, like Flexbox. Your use-case can be done in Block layout by just setting top/bottom margins on each child, and then setting the top margin to 0 on