diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 94841652dc9..17665ccdf6d 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./range.vars.scss";
 
 // Range
 // --------------------------------------------------
@@ -338,3 +339,11 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+:host(.in-item.range-label-placement-stacked) .label-text-wrapper {
+  @include margin($range-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.range-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $range-item-label-margin-bottom, null);
+}
diff --git a/core/src/components/range/range.vars.scss b/core/src/components/range/range.vars.scss
new file mode 100644
index 00000000000..69c46f7e9f2
--- /dev/null
+++ b/core/src/components/range/range.vars.scss
@@ -0,0 +1,8 @@
+/// @prop - Top margin of range's label when in an item
+$range-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of range's label when in an item
+// We don't add additional margin because the native container
+// has additional white space. Otherwise there would be too
+// much white space at the bottom of the item.
+$range-item-label-margin-bottom: 0px !default;
diff --git a/core/src/components/range/test/item/range.e2e.ts b/core/src/components/range/test/item/range.e2e.ts
index 188bd6f6c40..26e17b12e5b 100644
--- a/core/src/components/range/test/item/range.e2e.ts
+++ b/core/src/components/range/test/item/range.e2e.ts
@@ -50,3 +50,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('range: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-range label="Temperature" label-placement="stacked"></ion-range>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`range-stacked-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a9a19252bad
Binary files /dev/null and b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5de09ca8c6d
Binary files /dev/null and b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..06c5dbe2760
Binary files /dev/null and b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ