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] Should margin-trim apply to flex or grid containers? #3255

fantasai opened this issue Oct 26, 2018 · 4 comments

[css-box-3] Should margin-trim apply to flex or grid containers? #3255

fantasai opened this issue Oct 26, 2018 · 4 comments


Copy link

fantasai commented Oct 26, 2018

Like it says on the tin. Also, which axes should it apply to?

Options are: Block axis only / Main axis only / Cross axis only / Both / Neither

Copy link

I believe it should.

Copy link

Just some thoughts, no real conclusion :)

My instinct is that it should apply. My main gripe with Grid is precisely how poorly it works as a progressive enhancement over elements that use margin collapsing. It can be very hard to wrangle the margins when they are not set on direct children.

My first thought was that it should apply to both axes. That way margin-trim: all could always be used to get a clean slate when using gap for spacing.

But thinking about it as simply a solution for dealing with margin collapsing in grid/flex contexts, It might make more sense to just apply it to the block axis, since margin collapsing only works in that direction.

But then wouldn't this:

.grid {
  display: grid;
  margin-trim: all;

achieve the same result as:

.grid {
  display: grid;

.grid > * {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-trim: all;

So maybe margin-trim doesn't really need to apply to grid or flex containers, as it wouldn't solve any unsolvable problem 🤷‍♂️

Anyway, hope this lends some perspective, because I'd really love to see margin-trim implemented.

@fantasai fantasai added css-box-4 and removed css-box-3 Current Work labels Mar 7, 2020
Copy link

Agenda+ to resolve that this should apply to grid & flex containers.

Copy link

The CSS Working Group just discussed Should margin-trim apply to flex or grid containers, and agreed to the following:

  • RESOLVED: margin-trim applies to flex and grid containers also
The full IRC log of that discussion <fantasai> Topic: Should margin-trim apply to flex or grid containers
<fantasai> github:
<fantasai> miriam: margin-trim is designed to remove margins at the edge of the box that are inside the box
<fantasai> miriam: e.g. you have h1 inside section, but don't want margin on the h1 because section already has padding
<fantasai> miriam: or ...
<fantasai> miriam: That happens most often in block dimension, can also happen sometimes in inline dimension
<fantasai> miriam: We were looking through issues around it
<fantasai> miriam: One issue was whether it applies to flex or grid containers
<fantasai> miriam: And idea is to let it apply to both of them
<Rossen_> q?
<fantasai> jensimmons: sgtm
<fantasai> florian: haven't thought deeply, but wfm
<fantasai> Rossen_: Does this have an affect on alignment?
<florian> fantasai: only to the extend that if you trim alignment on one side of the box, you'll have alignment on the rest
<fantasai> Rossen_: So margin-trim is pre-alignment
<florian> fantasai: For instance, things would not longer be centered if you trim on some sides
<florian> s/if you/if you only/
<fantasai> Rossen_: Might check if this is desired effect, but sounds good to me
<fantasai> Rossen_: Anyone else?
<fantasai> Rossen_: Any objections?
<fantasai> RESOLVED: margin-trim applies to flex and grid containers also
<florian> q+

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

5 participants