Gallery Widget: Spacing between rows incorrect in Firefox

[melchoyce]

This is a continuation of the discussion started in #42101.

In Firefox, there is no spacing between rows in the Gallery widget. We want to add even spacing, without increasing the spacing in other browsers. A CSS expert would be great for this one :)

For more context, see this Slack conversation: ​https://wordpress.slack.com/archives/C02RQBWTW/p1507750029000162

Also see attached screenshots for what it currently looks like in Firefox, and what it should ideally look like.

[petertoi]

patch fixes the spacing issue on flex elements in Firefox

[petertoi]

Hello! It would appear that browsers have some flexibility in how they want to implement percentage padding/margins on Flex elements. See: ​https://drafts.csswg.org/css-flexbox/#item-margins

The spacing issue is resolved by removing the padding from .gallery-item and adding the space to the child element .gallery-icon by way of a margin.

Looks good in Chrome, Safari, IE and Firefox but may need more testing.

Happy to make any modifications if required.

[melchoyce]

Looks great! Thanks @petertoi :)

[melchoyce]

In 41834:

Gallery Widget: Fix row spacing across major browsers.

Props petertoi .
Fixes #42188.