Band body + grid + collapsing margins

[starryeyez024]

The band section .pfe-band__body uses display:grid, with a grid-column-gap to space out items inside that section. The problem is that we cannot reliably assume anything about the way the paragraph (or other elements) are controlling their margins.

Even if there are no extra styles on the page, basic paragraphs come with their own margins from the browser, so this doubles up the spacing on regular paragraphs. Normally the top and bottom margins are cancelled out by collapsing margins, but the effect goes away when grid is introduced. So you end up with a bottom margin from the first paragraph, a grid gap, and a top margin from the second paragraph.

The band demo/index.html file has some inline styles that negate this issue:

    p (and headers) {
      margin-top: 0;
    }

    p:last-child (and headers) {
      margin-bottom: 0;
    }

so its not visible on that page, but I don't think we can rely on these styles being present in a pre-existing page:

I think the solution is easy enough though, if we remove display:grid, display:flex (and related properties) from the .pfe-band__body section, it will go back to being neutral.

[castastrophe]

Updating this issue with the resolution we came up with - we actually didn't remove grid from the band body region. The guidance states that the body region should use an article or div tag to contain text elements.