diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index bd93b2bb0..9e9fba6b1 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -72,7 +72,7 @@ const PLACEMENT_RIGHT = isRTL ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start'
 
 const Default = {
-  offset: [0, 0],
+  offset: [0, 2],
   flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 594c06399..6941c9e8d 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -22,7 +22,7 @@
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
+  margin: 0; // Let Popper handle the space by offset
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -174,6 +174,11 @@
 
 .dropdown-menu.show {
   display: block;
+
+  &:not([data-popper-placement]) {
+    margin: $dropdown-spacer 0 0; // override default ul for dropdown not using Popper
+  }
+
 }
 
 // Dropdown section headers