diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index ac093651b1..438e099a92 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -88,6 +88,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
+    marginTop = 0,
+    marginRight = 0,
+    marginBottom = 5,
     marginLeft = 0,
     className,
     style,
@@ -170,18 +173,11 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;
-          margin-bottom: 0.5em;${
-            marginLeft === undefined
-              ? ""
-              : `
-          margin-left: ${+marginLeft}px;`
-          }${
-        width === undefined
-          ? ""
-          : `
-          width: ${width}px;`
-      }
+          font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
+        marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
+      }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${
+        marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`
+      }${width === undefined ? "" : `width: ${+width}px;`}
         }
         ${swatchStyle(className)}
         ${extraStyle}