diff --git a/CHANGELOG.md b/CHANGELOG.md index 852639095..7201cab8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -110,6 +110,10 @@ The `.text` function now accepts a `script` parameter with `sub` and `sup` value The `includeunnumbered` parameter has been removed, in favor of the more granular heading configuration previously mentioned. Now all indexable headings are included in the ToC by default, regardless of their numbering. +#### `.container`'s `margin` now suppresses children's margins + +When an explicit margin is applied to a `.container`, it now suppresses the margins of its direct children, for a more intuitive and flexible layout configuration. + #### `.fullspan` now relies on `.container` `.fullspan`, used to create a block spanning over multiple columns in a multi-column layout, is now shorthand for `.container fullspan:{yes}`. diff --git a/quarkdown-html/src/main/scss/components/_container.scss b/quarkdown-html/src/main/scss/components/_container.scss index 463b41212..2a5e98f9a 100644 --- a/quarkdown-html/src/main/scss/components/_container.scss +++ b/quarkdown-html/src/main/scss/components/_container.scss @@ -9,6 +9,21 @@ margin: 0; } + // When the container has an explicit inline margin, the default margins of children + // that don't carry their own inline margin are suppressed. + &[style*="margin"] > :not([style*="margin"]) { + margin-left: 0 !important; + margin-right: 0 !important; + + &:first-child { + margin-top: 0 !important; + } + + &:last-child { + margin-bottom: 0 !important; + } + } + > .stack { width: 100%; height: 100%; diff --git a/quarkdown-html/src/test/e2e/container/margin-suppress/main.qd b/quarkdown-html/src/test/e2e/container/margin-suppress/main.qd new file mode 100644 index 000000000..e76815bbd --- /dev/null +++ b/quarkdown-html/src/test/e2e/container/margin-suppress/main.qd @@ -0,0 +1,11 @@ +.figure + Hello + +.container fullwidth:{yes} margin:{20px} + .figure + Hello + +.container fullwidth:{yes} margin:{20px} + .container fullwidth:{yes} margin:{10px} + .figure + Hello \ No newline at end of file diff --git a/quarkdown-html/src/test/e2e/container/margin-suppress/margin-suppress.spec.ts b/quarkdown-html/src/test/e2e/container/margin-suppress/margin-suppress.spec.ts new file mode 100644 index 000000000..f0a3cb5a2 --- /dev/null +++ b/quarkdown-html/src/test/e2e/container/margin-suppress/margin-suppress.spec.ts @@ -0,0 +1,30 @@ +import {suite} from "../../quarkdown"; + +const {test, expect} = suite(__dirname); + +test("suppresses child margin when container has explicit margin", async (page) => { + const figures = page.locator("figure"); + const firstFigure = figures.nth(0); + const secondFigure = figures.nth(1); + const containers = page.locator(".container"); + const outerContainer = containers.nth(0); + + // The standalone figure retains its default non-zero margins. + await expect(firstFigure).not.toHaveCSS("margin-top", "0px"); + + // The figure inside a container with explicit margin has its margins suppressed. + await expect(secondFigure).toHaveCSS("margin-top", "0px"); + await expect(secondFigure).toHaveCSS("margin-bottom", "0px"); + + // The container itself has the 20px margin set via inline style. + await expect(outerContainer).toHaveCSS("margin", "20px"); +}); + +test("preserves inner container margin when nested", async (page) => { + const containers = page.locator(".container"); + const innerContainer = containers.nth(2); + + // The inner container's own inline margin (10px) is preserved, + // not suppressed by the outer container's margin rule. + await expect(innerContainer).toHaveCSS("margin", "10px"); +});