diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts
index 1d73a1fa8f1..e8ae8e33159 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts
@@ -79,19 +79,17 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/post-template',
-		{ __woocommerceNamespace: PRODUCT_TEMPLATE_ID },
+		{
+			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
+			/**
+			 * This class is used to add default styles for inner blocks.
+			 */
+			className: 'products-block-post-template',
+		},
 		[
 			[
 				'woocommerce/product-image',
 				{
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 					imageSizing: ImageSizing.THUMBNAIL,
 				},
 			],
@@ -112,39 +110,20 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 					isLink: true,
 					__woocommerceNamespace: PRODUCT_TITLE_ID,
 				},
-				[],
 			],
 			[
 				'woocommerce/product-price',
 				{
 					textAlign: 'center',
 					fontSize: 'small',
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 				},
-				[],
 			],
 			[
 				'woocommerce/product-button',
 				{
 					textAlign: 'center',
 					fontSize: 'small',
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 				},
-				[],
 			],
 		],
 	],
@@ -156,7 +135,6 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 				justifyContent: 'center',
 			},
 		},
-		[],
 	],
 	[ 'core/query-no-results' ],
 ];
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-query/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-query/style.scss
index 4e473a1b1d9..52130e65ae5 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-query/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-query/style.scss
@@ -12,3 +12,21 @@
 		margin-left: $gap-smaller;
 	}
 }
+
+/**
+ * These are the default styles for `product elements` that appear inside the 'Products Block'.
+ * These styles follow the Gutenberg styling hierarchy, which is as follows:
+ * Editor Styles > Global Styles > Child Theme > Parent Theme > These styles
+ *
+ * To ensure that the styles below have the lowest precedence in the hierarchy,
+ * we use the :where() selector to decrease the specificity of the CSS selector.
+ */
+:where(.products-block-post-template .wp-block-post) > * {
+	margin-bottom: 0.75rem;
+	margin-top: 0;
+}
+
+:where(.editor-styles-wrapper .products-block-post-template .wp-block-post) > * > * {
+	margin-bottom: 0;
+	margin-top: 0;
+}