diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
similarity index 61%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
rename to packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
index ee340f3d8fd..2a0d4f50caf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
@@ -6,9 +6,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
-// import { Space } from '@dnb/eufemia/src/components'
 import styled from '@emotion/styled'
-import { Space } from '@dnb/eufemia/src/components'
+import { Space, Input, FormRow, Button, P, Code } from '@dnb/eufemia/src'
 
 export const SpaceExamplesMethod1 = () => (
   <TestStyles>
@@ -16,15 +15,11 @@ export const SpaceExamplesMethod1 = () => (
       data-visual-test="spacing-method-space"
       scope={{ RedBox }}
     >
-      {
-        /* jsx */ `
-<RedBox>
-  <Space top="large x-small">
-    <Input label="Input:" />
-  </Space>
-</RedBox>
-`
-      }
+      <RedBox>
+        <Space top="large x-small">
+          <Input label="Input:" />
+        </Space>
+      </RedBox>
     </ComponentBox>
   </TestStyles>
 )
@@ -32,16 +27,12 @@ export const SpaceExamplesMethod1 = () => (
 export const SpaceExamplesMethod2 = () => (
   <TestStyles>
     <ComponentBox data-visual-test="spacing-method-form-row">
-      {
-        /* jsx */ `
-<FormRow>
-  <Input label="Input A:" />
-</FormRow>
-<FormRow top="medium">
-  <Input label="Input B:" />
-</FormRow>
-`
-      }
+      <FormRow>
+        <Input label="Input A:" />
+      </FormRow>
+      <FormRow top="medium">
+        <Input label="Input B:" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -49,14 +40,10 @@ export const SpaceExamplesMethod2 = () => (
 export const SpaceExamplesMethod3 = () => (
   <TestStyles>
     <ComponentBox data-visual-test="spacing-method-component">
-      {
-        /* jsx */ `
-<FormRow>
-  <Input label="Input A:" right="small" />
-  <Input label="Input B:" />
-</FormRow>
-`
-      }
+      <FormRow>
+        <Input label="Input A:" right="small" />
+        <Input label="Input B:" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -65,20 +52,22 @@ export const SpaceExampleMarginCollapse = () => (
   <TestStyles>
     <ComponentBox hideCode scope={{ RedBox, Vertical }}>
       {
-        /* jsx */ `
-<Vertical>
-  <RedBox>
-    <Space bottom="small">
-      <>I have <code className="dnb-code">bottom="small"</code></>
-    </Space>
-  </RedBox>
-  <RedBox>
-    <Space top="large">
-      <>I have <code className="dnb-code">top="large"</code></>
-    </Space>
-  </RedBox>
-</Vertical>
-`
+        <Vertical>
+          <RedBox>
+            <Space bottom="small">
+              <>
+                I have <code className="dnb-code">bottom="small"</code>
+              </>
+            </Space>
+          </RedBox>
+          <RedBox>
+            <Space top="large">
+              <>
+                I have <code className="dnb-code">top="large"</code>
+              </>
+            </Space>
+          </RedBox>
+        </Vertical>
       }
     </ComponentBox>
   </TestStyles>
@@ -87,18 +76,20 @@ export const SpaceExampleMarginCollapse = () => (
 export const SpaceExampleMargins = () => (
   <TestStyles>
     <ComponentBox data-visual-test="spacing-margins" hideCode>
-      {
-        /* jsx */ `
-<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
-  <details>
-    <summary>
-      I have four <code className="dnb-code">2.5rem</code> margins!
-    </summary>
-    And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
-  </details>
-</Space>
-`
-      }
+      <Space top="large x-small" right="2.5" bottom="2.5rem" left="40px">
+        <details>
+          <summary>
+            I have four <code className="dnb-code">2.5rem</code> margins!
+          </summary>
+          And this are my CSS classes:{' '}
+          <code className="dnb-code">
+            dnb-space dnb-space__top--large dnb-space__top--x-small
+            dnb-space__right--large dnb-space__right--x-small
+            dnb-space__bottom--large dnb-space__bottom--x-small
+            dnb-space__left--large dnb-space__left--x-small
+          </code>
+        </details>
+      </Space>
     </ComponentBox>
   </TestStyles>
 )
@@ -109,33 +100,38 @@ export const SpaceVisualTestPatterns = () => (
       data-visual-test="spacing-patterns"
       scope={{ MagicBox, CustomStyle }}
       hideCode
-      useRender
     >
-      {
-        /* jsx */ `
-const TestCase = (props) => {
-  return <CustomStyle {...props}>{listOfBoxes.map((v) => (
-    <Space key={v} top={v}>
-      <MagicBox />
-    </Space>
-  ))}</CustomStyle>
-}
-const listOfBoxes = []
-for (let i = 0, c = 0, l = 20; i <= l; i++) {
-  listOfBoxes.push(String(c))
-  c += 0.5
-}
-render(
-  <div className="spacing-patterns">
-    <P bottom>With <Code>dnb-core-style</Code></P>
-    <TestCase className="dnb-core-style" />
-    
-    <P top bottom>Without</P>
-    <TestCase />
-  </div>
-)
-`
-      }
+      {() => {
+        const TestCase = (props) => {
+          return (
+            <CustomStyle {...props}>
+              {listOfBoxes.map((v) => (
+                <Space key={v} top={v}>
+                  <MagicBox />
+                </Space>
+              ))}
+            </CustomStyle>
+          )
+        }
+        const listOfBoxes = []
+        for (let i = 0, c = 0, l = 20; i <= l; i++) {
+          listOfBoxes.push(String(c))
+          c += 0.5
+        }
+        return (
+          <div className="spacing-patterns">
+            <P bottom>
+              With <Code>dnb-core-style</Code>
+            </P>
+            <TestCase className="dnb-core-style" />
+
+            <P top bottom>
+              Without
+            </P>
+            <TestCase />
+          </div>
+        )
+      }}
     </ComponentBox>
   </TestStyles>
 )
@@ -144,49 +140,75 @@ render(
  * This test case exists because of the reset.css margin=0 for buttons
  */
 export const SpaceVisualTestElements = () =>
-  !(typeof window !== 'undefined' && window.IS_TEST) ? null : (
+  !globalThis.IS_TEST ? null : (
     <TestStyles>
       <ComponentBox
         data-visual-test="spacing-elements"
         scope={{ MagicBox, CustomStyle }}
         hideCode
-        useRender
       >
-        {
-          /* jsx */ `
-const listOfBoxes = []
-for (let i = 0, c = 0, l = 10; i <= l; i++) {
-  listOfBoxes.push(String(c))
-  c += 1
-}
-const TestCase = (props) => {
-  return <CustomStyle {...props}>
-    {listOfBoxes.map((v) => (
-      <Button
-        key={v}
-        left="x-small"
-        top={v}
-        size="small"
-        custom_content={<MagicBox />}
-      />
-    ))}
-  </CustomStyle>
-}
-render(
-  <div className="spacing-elements">
-    <P bottom>With <Code>dnb-core-style</Code></P>
-    <TestCase className="dnb-core-style" />
-    
-    <P top bottom>Without</P>
-    <TestCase />
-  </div>
-)
-`
-        }
+        {() => {
+          const listOfBoxes = []
+          for (let i = 0, c = 0, l = 10; i <= l; i++) {
+            listOfBoxes.push(String(c))
+            c += 1
+          }
+          const TestCase = (props) => {
+            return (
+              <CustomStyle {...props}>
+                {listOfBoxes.map((v) => (
+                  <Button
+                    key={v}
+                    left="x-small"
+                    top={v}
+                    size="small"
+                    custom_content={<MagicBox />}
+                  />
+                ))}
+              </CustomStyle>
+            )
+          }
+          return (
+            <div className="spacing-elements">
+              <P bottom>
+                With <Code>dnb-core-style</Code>
+              </P>
+              <TestCase className="dnb-core-style" />
+
+              <P top bottom>
+                Without
+              </P>
+              <TestCase />
+            </div>
+          )
+        }}
       </ComponentBox>
     </TestStyles>
   )
 
+export const SpaceVisualTestReset = () =>
+  !globalThis.IS_TEST ? null : (
+    <ComponentBox data-visual-test="spacing-reset">
+      {() => {
+        const BlueBox = styled.div`
+          display: inline-block;
+          padding: 0.5rem;
+          background: blue;
+          ul {
+            background: white;
+          }
+        `
+        return (
+          <BlueBox>
+            <ul className="dnb-space__reset dnb-space__top--small dnb-space__right--small dnb-space__bottom--small dnb-space__left--small">
+              <li> </li>
+            </ul>
+          </BlueBox>
+        )
+      }}
+    </ComponentBox>
+  )
+
 const TestStyles = styled.div`
   /* make sure our input gets an explicit width, because of mac/linux rendering differences */
   .dnb-input {
@@ -281,8 +303,8 @@ const Label = styled.label`
   color: var(--color-black-80);
 `
 
-const MagicBox = ({ label, ...rest }) => {
-  const ref = React.createRef()
+const MagicBox = ({ label = null, ...rest }) => {
+  const ref = React.createRef<HTMLDivElement>()
 
   const [spaceInRem, setLabel] = React.useState(label)
   const [title, setTitle] = React.useState(null)
@@ -340,8 +362,8 @@ MagicBox.defaultProps = {
   label: null,
 }
 
-const VisualSpace = ({ label, children, ...rest }) => {
-  const ref = React.createRef()
+const VisualSpace = ({ label = null, children, ...rest }) => {
+  const ref = React.createRef<HTMLDivElement>()
 
   const [direction, setDirection] = React.useState('top')
   const [spaceInRem, setLabel] = React.useState(label)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.md
index d88a04377c4..85776890ec7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.md
@@ -9,7 +9,8 @@ SpaceExamplesMethod3,
 SpaceExampleMarginCollapse,
 SpaceExampleMargins,
 SpaceVisualTestPatterns,
-SpaceVisualTestElements
+SpaceVisualTestElements,
+SpaceVisualTestReset,
 } from 'Docs/uilib/components/space/Examples'
 
 ## Demos
@@ -39,3 +40,5 @@ SpaceVisualTestElements
 <SpaceVisualTestPatterns />
 
 <SpaceVisualTestElements />
+
+<SpaceVisualTestReset />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
index 928cec54fbb..2cc168a5e00 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
@@ -85,3 +85,20 @@ The best solution is to only use one direction of margins e.g. `bottom`. Or you
 ### Margin collapsing
 
 In order to help out to handle unwanted margin collapsing in typography elements, se [this example](/uilib/elements/heading#example-of-margin-collapsing)
+
+### Conditional Rest
+
+For resetting spacing (`margin: 0`) only when no spacing is defined, you can make use of `dnb-space__reset`.
+
+The following example will result in `margin: 0.5rem 0 0 0`:
+
+```html
+<ul class="my-list dnb-space__reset dnb-space__top--small">
+  <!-- some content -->
+</ul>
+```
+
+More details:
+
+1. Because of the browser default styles, our list has some margin.
+1. If we would want to "reset" these styles to a margin of 0 directly on `.my-list`, we would not be able to use `dnb-space__top--small` because of the CSS specificity is lower.
diff --git a/packages/dnb-eufemia/src/components/space/__tests__/Space.screenshot.test.ts b/packages/dnb-eufemia/src/components/space/__tests__/Space.screenshot.test.ts
index dee6f0d61bd..0069def9b32 100644
--- a/packages/dnb-eufemia/src/components/space/__tests__/Space.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/components/space/__tests__/Space.screenshot.test.ts
@@ -54,4 +54,11 @@ describe('Space', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match the spacing reset', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="spacing-reset"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/space/__tests__/__image_snapshots__/space-have-to-match-the-spacing-reset.snap.png b/packages/dnb-eufemia/src/components/space/__tests__/__image_snapshots__/space-have-to-match-the-spacing-reset.snap.png
new file mode 100644
index 00000000000..e4da63b725f
Binary files /dev/null and b/packages/dnb-eufemia/src/components/space/__tests__/__image_snapshots__/space-have-to-match-the-spacing-reset.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap
index d74139498ee..11ff5984087 100644
--- a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap
@@ -597,6 +597,18 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-space__left--xx-large-x2.dnb-space__left--x-large {
   margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
 }
+.dnb-space__reset:not([class*=dnb-space__top]) {
+  margin-top: 0;
+}
+.dnb-space__reset:not([class*=dnb-space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-space__reset:not([class*=dnb-space__left]) {
+  margin-left: 0;
+}
+.dnb-space__reset:not([class*=dnb-space__right]) {
+  margin-right: 0;
+}
 
 span.dnb-space--no-collapse > span {
   display: block;
diff --git a/packages/dnb-eufemia/src/components/space/style/dnb-space.scss b/packages/dnb-eufemia/src/components/space/style/dnb-space.scss
index e633e326a95..f01a59da7af 100644
--- a/packages/dnb-eufemia/src/components/space/style/dnb-space.scss
+++ b/packages/dnb-eufemia/src/components/space/style/dnb-space.scss
@@ -173,6 +173,20 @@
   &__left {
     @include direction(left);
   }
+  &__reset {
+    &:not([class*='dnb-space__top']) {
+      margin-top: 0;
+    }
+    &:not([class*='dnb-space__bottom']) {
+      margin-bottom: 0;
+    }
+    &:not([class*='dnb-space__left']) {
+      margin-left: 0;
+    }
+    &:not([class*='dnb-space__right']) {
+      margin-right: 0;
+    }
+  }
 }
 span.dnb-space--no-collapse > span {
   display: block;