diff --git a/src/components/settings-row/settings-row.component.js b/src/components/settings-row/settings-row.component.js
index f4f39eeca9..5d0e954439 100644
--- a/src/components/settings-row/settings-row.component.js
+++ b/src/components/settings-row/settings-row.component.js
@@ -1,7 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Heading from "../heading";
 import tagComponent from "../../utils/helpers/tags";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 import {
   StyledSettingsRow,
@@ -9,6 +11,10 @@ import {
   StyledSettingsRowInput,
 } from "./settings-row.style";
 
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
+
 const SettingsRow = ({
   title,
   description,
@@ -35,6 +41,8 @@ const SettingsRow = ({
       className={className}
       hasDivider={divider}
       {...tagComponent("settings-row", rest)}
+      m={0}
+      {...filterStyledSystemMarginProps(rest)}
     >
       <StyledSettingsRowHeader>{heading()}</StyledSettingsRowHeader>
       <StyledSettingsRowInput>{children}</StyledSettingsRowInput>
@@ -43,6 +51,7 @@ const SettingsRow = ({
 };
 
 SettingsRow.propTypes = {
+  ...marginPropTypes,
   /**  This component supports children. */
   children: PropTypes.node,
   /**  The CSS classes to apply to the component. */
diff --git a/src/components/settings-row/settings-row.spec.js b/src/components/settings-row/settings-row.spec.js
index 7df3be7beb..89143ffb9f 100644
--- a/src/components/settings-row/settings-row.spec.js
+++ b/src/components/settings-row/settings-row.spec.js
@@ -9,10 +9,15 @@ import {
 } from "./settings-row.style";
 import Heading from "../heading";
 import { rootTagTest } from "../../utils/helpers/tags/tags-specs";
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import baseTheme from "../../style/themes/base";
 
 describe("SettingsRow", () => {
+  testStyledSystemMargin((props) => <SettingsRow {...props} />, { m: "0" });
+
   describe("render", () => {
     const name = "foobar-row";
     const title = "Some Title";
diff --git a/src/components/settings-row/settings-row.stories.mdx b/src/components/settings-row/settings-row.stories.mdx
index 2c8af55f12..d1a736f099 100644
--- a/src/components/settings-row/settings-row.stories.mdx
+++ b/src/components/settings-row/settings-row.stories.mdx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import StyledSystemProps from '../../../.storybook/utils/styled-system-props';
 
 import SettingsRow from ".";
 
@@ -45,4 +46,9 @@ All `children` are rendered in the input column to the right of the header colum
 ## Props
 
 ### Settings Row 
-<Props of={SettingsRow} />
+
+<StyledSystemProps
+  of={SettingsRow}
+  margin
+  noHeader
+/>
diff --git a/src/components/settings-row/settings-row.style.js b/src/components/settings-row/settings-row.style.js
index d4f368bd14..866db0029d 100644
--- a/src/components/settings-row/settings-row.style.js
+++ b/src/components/settings-row/settings-row.style.js
@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import {
   StyledHeader,
@@ -7,12 +8,13 @@ import {
 } from "../heading/heading.style";
 
 export const StyledSettingsRow = styled.div`
+  ${margin}
+
   clear: both;
   color: ${({ theme }) => theme.palette.slateTint(20)};
   display: flex;
   font-size: 14px;
   justify-content: space-between;
-  margin: 0;
   padding: 0;
   position: relative;