diff --git a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
index 748b8eaa6e8..2f92289db0e 100644
--- a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
@@ -568,7 +568,9 @@ exports[`Headings with plain text subheadline should render h2 containing correc
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -587,7 +589,7 @@ exports[`Headings with plain text subheadline should render h2 containing correc
 
 @media (min-width: 37.5rem) {
   .emotion-2 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
@@ -1547,7 +1549,9 @@ exports[`Headings with subheadline data should render correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1566,7 +1570,7 @@ exports[`Headings with subheadline data should render correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-2 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
diff --git a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
index 20a152437a1..277632b3c10 100644
--- a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
@@ -134,7 +134,9 @@ exports[`SubHeading component should render correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -153,7 +155,7 @@ exports[`SubHeading component should render correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
@@ -181,7 +183,9 @@ exports[`SubHeading component should render correctly on page types that support
   font-weight: 700;
   font-style: normal;
   color: #F6F6F6;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -200,7 +204,7 @@ exports[`SubHeading component should render correctly on page types that support
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
@@ -228,7 +232,9 @@ exports[`SubHeading component should render correctly with an ID 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -247,7 +253,7 @@ exports[`SubHeading component should render correctly with an ID 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
@@ -276,7 +282,9 @@ exports[`SubHeading component should render correctly with arabic script typogra
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -295,7 +303,7 @@ exports[`SubHeading component should render correctly with arabic script typogra
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }
 
diff --git a/src/app/legacy/psammead/psammead-headings/src/index.jsx b/src/app/legacy/psammead/psammead-headings/src/index.jsx
index 65c3c680816..5f5b576fd87 100644
--- a/src/app/legacy/psammead/psammead-headings/src/index.jsx
+++ b/src/app/legacy/psammead/psammead-headings/src/index.jsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import {
+  GEL_SPACING_DBL,
   GEL_SPACING_TRPL,
   GEL_SPACING_QUAD,
   GEL_SPACING_QUIN,
@@ -28,14 +29,21 @@ export const Headline = styled.h1`
   }
 `;
 
+const SUBHEADING_PADDING = '0.5rem';
+
 export const SubHeading = styled.h2`
   ${({ script }) => script && getTrafalgar(script)};
   ${({ service }) => getSansBold(service)}
   color: ${({ theme }) =>
     theme.isDarkUi ? theme.palette.GREY_2 : theme.palette.GREY_10};
-  margin: ${GEL_SPACING_TRPL} 0;
+
+  padding: ${SUBHEADING_PADDING} 0;
+  margin: calc(${GEL_SPACING_TRPL} - ${SUBHEADING_PADDING}) 0;
+  scroll-margin-top: ${GEL_SPACING_DBL};
+
   ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
-    margin-top: ${GEL_SPACING_QUAD};
+    padding-top ${SUBHEADING_PADDING};
+    margin-top: calc(${GEL_SPACING_QUAD} - ${SUBHEADING_PADDING});
   }
 
   :focus-visible {
diff --git a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
index af9365a08a5..39d9e962a82 100644
--- a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
@@ -635,7 +635,9 @@ exports[`MediaArticlePage should render a news article correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  margin: calc(1.5rem - 0.5rem) 0;
+  scroll-margin-top: 1rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -654,7 +656,7 @@ exports[`MediaArticlePage should render a news article correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-31 {
-    margin-top: 2rem;
+    margin-top: calc(2rem - 0.5rem);
   }
 }