[csswg-drafts] [css- not sure] child-contain: border-box; to resolve child margins at parents edge

Meteor0id has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css- not sure] child-contain: border-box; to resolve child margins at parents edge ==
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.

child-contain: border-box;

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.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2848 using your GitHub account

Received on Friday, 29 June 2018 12:14:05 UTC