diff --git a/docs/components/popup.md b/docs/components/popup.md
index 02ceb3d9a..35e4a05bb 100644
--- a/docs/components/popup.md
+++ b/docs/components/popup.md
@@ -61,7 +61,6 @@ A description of the component goes here.
 <style>
   .popup-overview sl-popup {
     --arrow-color: var(--sl-color-primary-600);
-    margin: calc(50px + 1rem);
   }
 
   .popup-overview span[slot='anchor'] {
@@ -69,7 +68,7 @@ A description of the component goes here.
     width: 150px;
     height: 150px;
     border: dashed 2px var(--sl-color-neutral-200);
-    padding: 0.5rem;
+    margin: 50px;
   }
 
   .popup-overview .box {
diff --git a/src/components/popup/popup.styles.ts b/src/components/popup/popup.styles.ts
index ebc541509..5b4850b66 100644
--- a/src/components/popup/popup.styles.ts
+++ b/src/components/popup/popup.styles.ts
@@ -8,7 +8,7 @@ export default css`
     --arrow-size: 4px;
     --arrow-color: var(--sl-color-neutral-1000);
 
-    display: inline-block;
+    display: contents;
   }
 
   .popup {
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index 7058d0c63..1359da87f 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -24,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
 export default class SlPopup extends LitElement {
   static styles: CSSResultGroup = styles;
 
-  @query('.popup') popupEl: HTMLElement;
+  @query('.popup') popup: HTMLElement;
   @query('.popup__arrow') arrowEl: HTMLElement;
 
   private anchor: HTMLElement | null;
@@ -206,7 +206,7 @@ export default class SlPopup extends LitElement {
       return;
     }
 
-    this.cleanup = autoUpdate(this.anchor, this.popupEl, () => {
+    this.cleanup = autoUpdate(this.anchor, this.popup, () => {
       this.reposition();
     });
   }
@@ -292,7 +292,7 @@ export default class SlPopup extends LitElement {
           padding: this.resizePadding,
           apply: ({ availableWidth, availableHeight }) => {
             // Ensure the panel stays within the viewport when we have lots of menu items
-            Object.assign(this.popupEl.style, {
+            Object.assign(this.popup.style, {
               maxWidth: `${availableWidth}px`,
               maxHeight: `${availableHeight}px`
             });
@@ -301,7 +301,7 @@ export default class SlPopup extends LitElement {
       );
     } else {
       // Unset max-width/max-height when we're no longer using this middleware
-      Object.assign(this.popupEl.style, { maxWidth: '', maxHeight: '' });
+      Object.assign(this.popup.style, { maxWidth: '', maxHeight: '' });
     }
 
     // Finally, we add an arrow
@@ -314,14 +314,14 @@ export default class SlPopup extends LitElement {
       );
     }
 
-    computePosition(this.anchor, this.popupEl, {
+    computePosition(this.anchor, this.popup, {
       placement: this.placement,
       middleware,
       strategy: this.strategy
     }).then(({ x, y, middlewareData, placement }) => {
       const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;
 
-      Object.assign(this.popupEl.style, {
+      Object.assign(this.popup.style, {
         left: `${x}px`,
         top: `${y}px`
       });