diff --git a/CHANGELOG.md b/CHANGELOG.md
index e50395d409..8a7d39b8a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * Fix bottom border colour issue in the super nav search button ([PR #4642](https://github.com/alphagov/govuk_publishing_components/pull/4642))
 * Use govuk-spacing instead of govuk-gutter ([PR #4650](https://github.com/alphagov/govuk_publishing_components/pull/4650))
+* Ensure 'search with autocomplete' component uses its own margin bottom ([PR #4637](https://github.com/alphagov/govuk_publishing_components/pull/4637))
 
 ## 52.1.0
 
diff --git a/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb b/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb
index 69323a8d24..c80c9c7d62 100644
--- a/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb
+++ b/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb
@@ -8,16 +8,20 @@
     raise ArgumentError, "The search_with_autocomplete component requires source_url and source_key"
   end
 
-  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key).merge(
+  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key, :margin_bottom).merge(
     # The `search` component has an inline label by default, but this conflicts with the accessible-
     # autocomplete component's markup and styling. Every potential use of this component is in
     # situations where we want the label not to be inline anyway, so we override the default here.
-    inline_label: false
+    inline_label: false,
+    margin_bottom: 0
   )
 
   classes = %w[gem-c-search-with-autocomplete]
   classes << "gem-c-search-with-autocomplete--large" if local_assigns[:size] == "large"
   classes << "gem-c-search-with-autocomplete--on-govuk-blue" if local_assigns[:on_govuk_blue]
+
+  margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? local_assigns[:margin_bottom] : 6
+  classes << "govuk-!-margin-bottom-#{margin_bottom}" if margin_bottom
 %>
 <%= tag.div(
   class: classes.join(" "),
diff --git a/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml b/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml
index f9064483a8..358b0e5633 100644
--- a/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml
+++ b/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml
@@ -60,3 +60,10 @@ examples:
       source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
       source_key: suggested_autocomplete
       label_text: <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Search GOV.UK</h2>
+  with_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom value of 6.
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      margin_bottom: 9
diff --git a/spec/components/search_with_autocomplete_spec.rb b/spec/components/search_with_autocomplete_spec.rb
index 998185ec66..81fe18e4db 100644
--- a/spec/components/search_with_autocomplete_spec.rb
+++ b/spec/components/search_with_autocomplete_spec.rb
@@ -49,4 +49,47 @@ def component_name
 
     assert_select ".gem-c-search.gem-c-search--on-govuk-blue.gem-c-search--large"
   end
+
+  it "applies a margin bottom of 0" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: 0,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-0'
+  end
+
+  it "applies a valid margin bottom" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: 4,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-4'
+  end
+
+  it "defaults to a margin bottom of 6" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-6'
+  end
+
+  it "sets margin bottom to 6 if an invalid number is passed" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: -1,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-6'
+  end
+
+  it "disables margin bottom on the child search component" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+    })
+    assert_select '.gem-c-search.govuk-\!-margin-bottom-0'
+  end
 end