Percentage padding / margin on grid item ignored in Firefox

by

From the spec:

6.4. Grid Item Margins and
Paddings

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

Here’s the full section:

As adjacent grid items are independently contained within the
containing block formed by their grid areas, the margins of adjacent
grid items do not collapse.

Percentage margins and paddings on grid items can be resolved against
either:

  • their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
  • the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no
consensus within the CSSWG). It is the CSSWG’s intention that browsers
will converge on one of the behaviors, at which time the spec will be
amended to require that.

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different
browsers.

Auto margins expand to absorb extra space in the corresponding
dimension, and can therefore be used for alignment.

Flexbox, another CSS3 technology, has the same problem.

Here’s how I implemented the padding-bottom trick for a video nested in a flex container (see last bullet point): https://stackoverflow.com/a/39310591/3597276

More Related Contents:

  1. Custom CSS Scrollbar for Firefox
  2. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  3. SVG data image not working as a background-image in a pseudo element
  4. Equal height rows in CSS Grid Layout
  5. CSS @font-face not working with Firefox, but working with Chrome and IE
  6. The difference between percentage and fr units
  7. What is difference between justify-self, justify-items and justify-content in CSS grid?
  8. How to make the items in the last row consume remaining space in CSS Grid?
  9. Content url does not display image on firefox browser
  10. 3D CSS transform, jagged edges in Firefox
  11. How can I make a div span multiple rows and columns in a grid?
  12. firefox overflow-y not working with nested flexbox
  13. What is the difference between align-items vs. align-content in Grid Layout?
  14. Equal height of elements inside grid item with CSS grid layout
  15. How can I zoom an HTML element in Firefox and Opera?
  16. Firefox ignores padding when using overflow:scroll
  17. Faster way to develop and test print stylesheets (avoid print preview every time)?
  18. Can I have a varying number of columns per row in a CSS grid?
  19. Why does a grid-area name absent in grid-template-areas create additional tracks?
  20. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  21. CSS Grid auto fit with max-content
  22. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  23. Can flex items wrap in a container with dynamic height?
  24. position relative in firefox [duplicate]
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. Is a button allowed to have display:grid? [duplicate]
  27. Firefox blurs an image when scaled through external CSS or inline style.
  28. minmax fails (invalid property value)
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. Getting columns to wrap in CSS Grid

Leave a Comment