the editor may draw on the page, not change it

`element.style.margin = '2.5rem 0'` on every section — 40 pixels above and below every band that the
real page does not have. It was there to make room for the band's label, which sat above it.

So the preview overstated the spacing of every page in the site, on the screen whose entire purpose is
to show what a page looks like. It was reported as "there is a lot more space between the logo and the
text in the admin", and that is exactly what it was. I had looked at the component tools, found them
absolutely positioned, and said nothing the editor draws takes layout space. The section margin was two
lines above the thing I read.

The label moved inside the band it names. It is hover-only, so overlaying the first line for as long as
the pointer is there costs nothing — and lying about the layout costs the preview its whole point.

What remains is absolutely positioned or an outline, neither of which takes space. The add-section
zone keeps its margin: it is the editor's own element at the end of the page, spacing only itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/canvas.ts

@@ -213,25 +213,34 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
     if (!element) continue;
 
     const previousPosition = element.style.position;
-    const previousMargin = element.style.margin;
 
     // `relative` so the label and the controls can be placed against this band rather than the page.
     element.style.position = 'relative';
-    // Room for the outline and the label above it, so two bands in a row do not touch. Kept inline
-    // because it is layout and must hold whether or not anything is hovered — the outline itself is in
-    // the stylesheet, INSET, so a band filling the column never draws past the measure.
-    element.style.margin = '2.5rem 0';
 
+    /*
+      NO margin. There was `2.5rem 0` here, to make room for the label above each band.
+
+      That is 40 pixels above and below every section that the real page does not have, and it made the
+      preview overstate the spacing of every page in the site — on the one screen whose entire purpose
+      is to show what the page looks like. It was reported as "there is a lot more space between the
+      logo and the text in the admin", which is exactly what it was.
+
+      A preview may draw ON the page. It may not CHANGE it. Everything this file adds is now either
+      absolutely positioned or an outline, both of which take no layout space, and the label moved
+      inside the band it names — see the bar below.
+    */
     undo.push(() => {
       element.style.position = previousPosition;
-      element.style.margin = previousMargin;
     });
 
     const bar = document.createElement('div');
     bar.setAttribute(MARK, 'section-bar');
     style(bar, [
       'position:absolute',
-      'top:-1.75rem',
+      // INSIDE the band, not above it. Above needed 40px of margin the page does not have; the bar is
+      // hover-only, so overlaying the first line of a band for as long as the pointer is on it costs
+      // nothing and lying about the layout costs the preview its whole point.
+      'top:0',
       'left:0',
       'right:0',
       'display:flex',