Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-box-3] child-contain: border-box; to resolve child margins at parents edge #2848

Open
Meteor0id opened this issue Jun 29, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@Meteor0id
Copy link

commented Jun 29, 2018

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.

@fantasai fantasai added the css-box-3 label Jul 24, 2018

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Jul 24, 2018

Hi! I'm not entirely clear on what you're trying to propose. Can you give a more specific example, like some HTML+CSS of what you're trying to accomplish?

@jonjohnjohnson

This comment has been minimized.

Copy link

commented Jul 26, 2018

Would using display: flow-root on the parent solve most your cases? This inhibits margin collapsing between itself and it's children. Either that and/or using...

.parent > :first-child { margin-top: 0; }
.parent > :last-child { margin-bottom: 0; }

...usually covers all cases for me.

@Meteor0id

This comment has been minimized.

Copy link
Author

commented Aug 24, 2018

When the parent is a flex container I can not set flow-root, as it is already display:flex;
first-child and last-child can also not solve this issue in a flex element, where it is not know ahead of time which child elements will be at the border.

@tabatkins

This comment has been minimized.

Copy link
Member

commented Aug 24, 2018

Ah, Flexbox (and Grid) have this already solved, then. If you use the gap properties, you can create a minimum separation between siblings, but not at the edges with their parent.

(Note that gaps aren't implemented for Flexbox yet, but they will be.)

Does this solve your problem?

@Meteor0id

This comment has been minimized.

Copy link
Author

commented Aug 25, 2018

It might solve my problem, however would it not make more semantic sense to have a property which may be applied on any element?

child-contain: border-box; (Instructs that the margins of any child element will not be contained, but the borders and padding will be. Margins still have affect between children.)

Other options:
child-contain: padding-box; (margin and border of any child element will overflow)
child-contain: margin-box; (default, contain every part of child elements)

not sure if child-contain: content-box; will have a use case.

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?

@tabatkins

This comment has been minimized.

Copy link
Member

commented Aug 26, 2018

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, child-contain: margin-box as you describe it is not the default value for Block layout; child margins are allowed to "escape" (collapse thru) the parent if the parent has no padding or border, but are "contained" if it does, so it's not just a matter of the child deciding what it wants to do.

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 :first-child and bottom to 0 on :last-child. You can't rejigger the order of elements in block layout; you can't have multiple rows of content so that multiple unpredictable elements are bordering the parent (except in multicol, which has some special abilities as a result); these are all things that Flexbox and Grid can do, and that's why we have specialized properties to make it easier to achieve these things there.

@fantasai fantasai changed the title [css- not sure] child-contain: border-box; to resolve child margins at parents edge [css-box-3] child-contain: border-box; to resolve child margins at parents edge Aug 30, 2018

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Oct 26, 2018

Added a margin-trim property per #3068 which I believe should solve this use case.
See http://drafts.csswg.org/css-box-3/#margin-trim

@Meteor0id Can you have a look and let me know if this (and the gap properties for Flexbox and Grid that @tabatkins mentioned) would resolve your concerns?

See also follow-up issues #3256 and #3255

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.