feat: allow container's explicit margin to suppress children's

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}`.

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%;

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

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");
+});