diff --git a/apps/docs/src/components/example-block.browser.test.tsx b/apps/docs/src/components/example-block.browser.test.tsx
index 7feb192e..7defb1e4 100644
--- a/apps/docs/src/components/example-block.browser.test.tsx
+++ b/apps/docs/src/components/example-block.browser.test.tsx
@@ -34,6 +34,14 @@ test('shows a named loading state in a frame that reserves the preview space', (
 	expect(playgroundPlaceholder.closest<HTMLElement>('[inert]')?.inert).toBe(true);
 });
 
+test('keeps docs block spacing on the example frame', () => {
+	renderExample(exampleTitle);
+
+	const frameStyles = getComputedStyle(page.getByRole('region', { name: loadingLabel }).element());
+	expect(frameStyles.marginTop).toBe('16px');
+	expect(frameStyles.marginBottom).toBe('16px');
+});
+
 function renderExample(title: string) {
 	container = document.body.appendChild(document.createElement('div'));
 	container.className = `luke-ui-theme ${tactileThemeClassName}`;
diff --git a/apps/docs/src/components/example-block.tsx b/apps/docs/src/components/example-block.tsx
index 0114296b..acad5534 100644
--- a/apps/docs/src/components/example-block.tsx
+++ b/apps/docs/src/components/example-block.tsx
@@ -134,7 +134,7 @@ function ExampleFrame({ actions, ariaLabel, children, title }: ExampleFrameProps
 	return (
 		<Box
 			aria-label={ariaLabel}
-			className="not-prose overflow-hidden rounded-lg border border-fd-border"
+			className="not-prose my-4 overflow-hidden rounded-lg border border-fd-border"
 			role={ariaLabel ? 'region' : undefined}
 		>
 			<Box className="flex items-center justify-between gap-2 border-fd-border border-b bg-fd-card px-4 py-2">