diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte
index 2d1f2224a..64febef26 100644
--- a/src/lib/components/Collapsible.svelte
+++ b/src/lib/components/Collapsible.svelte
@@ -15,6 +15,7 @@
   export let expandButton = true;
   export let externalToggle = false;
   export let wrapHeight = false;
+  export let offsetContent = false;
 
   // Minimum height when some part of the text-content is visible (empirical value)
   const CONTENT_MIN_HEIGHT = 40;
@@ -97,6 +98,8 @@
     role="definition"
     class="wrapper"
     class:expanded
+    class:offset-content={offsetContent && !maxContentHeight}
+    class:offset-content-scroll={offsetContent && maxContentHeight}
     style={`${maxHeightStyle(maxHeight)}${overflyYStyle(maxHeight)}`}
   >
     <div
@@ -196,4 +199,26 @@
       padding-bottom: var(--padding);
     }
   }
+
+  .offset-content,
+  .offset-content-scroll {
+    &.wrapper {
+      margin: 0 calc(var(--padding) * -1);
+    }
+    &.expanded {
+      margin: 0 calc(var(--padding) * -1) calc(var(--padding) * -1)
+        calc(var(--padding) * -1);
+    }
+
+    .content {
+      padding: var(--padding);
+    }
+  }
+
+  .offset-content-scroll {
+    &.expanded {
+      margin: var(--padding) calc(var(--padding) * -1) calc(var(--padding) * -1)
+        calc(var(--padding) * -1);
+    }
+  }
 </style>
diff --git a/src/routes/(split)/components/collapsible/+page.md b/src/routes/(split)/components/collapsible/+page.md
index 819358d17..532cc8594 100644
--- a/src/routes/(split)/components/collapsible/+page.md
+++ b/src/routes/(split)/components/collapsible/+page.md
@@ -47,15 +47,16 @@ Collapsible is an accordion element that expands when clicked on. They allow you
 
 ## Properties
 
-| Property           | Description                                                     | Type                    | Default     |
-| ------------------ | --------------------------------------------------------------- | ----------------------- | ----------- |
-| `id`               | Corresponding id of the content element, for selection purposes | `string` or `undefined` | `undefined` |
-| `initallyExpanded` | Initially collapsed or expanded                                 | `boolean`               | `false`     |
-| `maxContentHeight` | Optional height that defines the maximum content height         | `number` or `undefined` | `undefined` |
-| `iconSize`         | Size of the icon: either `small` or `medium`                    | `string`                | `small`     |
-| `expandButton`     | Whether to include an expand button                             | `boolean`               | `true`      |
-| `externalToggle`   | To have an external toggle element                              | `boolean`               | `false`     |
-| `wrapHeight`       | To have wrapped height                                          | `boolean`               | `false`     |
+| Property           | Description                                                                                                                                                                                                                                                                                                                                                      | Type                    | Default     |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- |
+| `id`               | Corresponding id of the content element, for selection purposes                                                                                                                                                                                                                                                                                                  | `string` or `undefined` | `undefined` |
+| `initallyExpanded` | Initially collapsed or expanded                                                                                                                                                                                                                                                                                                                                  | `boolean`               | `false`     |
+| `maxContentHeight` | Optional height that defines the maximum content height                                                                                                                                                                                                                                                                                                          | `number` or `undefined` | `undefined` |
+| `iconSize`         | Size of the icon: either `small` or `medium`                                                                                                                                                                                                                                                                                                                     | `string`                | `small`     |
+| `expandButton`     | Whether to include an expand button                                                                                                                                                                                                                                                                                                                              | `boolean`               | `true`      |
+| `externalToggle`   | To have an external toggle element                                                                                                                                                                                                                                                                                                                               | `boolean`               | `false`     |
+| `wrapHeight`       | To have wrapped height                                                                                                                                                                                                                                                                                                                                           | `boolean`               | `false`     |
+| `offsetContent`    | Offset the content so that outlines and negative-margin positioned elements dont get cut off. This is mostly useful for buttons aligning directly on the content border and when they have focus outlines.<br/><br/><b>Note:</b> The positioning of the content stays the same but theres a `--padding` width more room before `overflow: hidden` has any effect | `boolean`               | `false`     |
 
 ## Slots