diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 8883720bbc2aa..521a835394878 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -13,6 +13,22 @@
 		},
 		"customTextColor": {
 			"type": "string"
+		},
+		"paddingUnit": {
+			"type": "string",
+			"default": "px"
+		},
+		"paddingSize": {
+			"type": "string",
+			"default": ""
+		},
+		"marginUnit": {
+			"type": "string",
+			"default": "px"
+		},
+		"marginSize": {
+			"type": "string",
+			"default": ""
 		}
 	}
 }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 80f496967f599..6b706f6462585 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,12 +1,29 @@
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { InnerBlocks, __experimentalUseColors } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	__experimentalUseColors,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
-function GroupEdit( { hasInnerBlocks, className } ) {
+import {
+	PanelBody,
+	__experimentalDimensionControl as DimensionControl,
+} from '@wordpress/components';
+
+import { __ } from '@wordpress/i18n';
+
+function GroupEdit( { hasInnerBlocks, className, attributes, setAttributes } ) {
 	const ref = useRef();
 	const {
 		TextColor,
@@ -23,12 +40,60 @@ function GroupEdit( { hasInnerBlocks, className } ) {
 		}
 	);
 
+	/**
+	 * Updates the spacing attribute for a given dimension
+	 * (and optionally a given viewport)
+	 *
+	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
+	 * @param  {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
+	 * @return {void}
+	 */
+	const updateSpacing = ( size, dimensionAttr ) => {
+		setAttributes( {
+			[ dimensionAttr ]: size,
+		} );
+	};
+
+	const hasPadding = !! attributes.paddingSize;
+	const hasMargin = !! attributes.marginSize;
+
+	const classes = classnames( className, {
+		'has-padding': hasPadding,
+		'has-margin': hasMargin,
+		[ `padding-${ attributes.paddingSize }` ]: hasPadding,
+		[ `margin-${ attributes.marginSize }` ]: hasMargin,
+	} );
+
 	return (
 		<>
 			{ InspectorControlsColorPanel }
+			<InspectorControls>
+				<PanelBody title={ __( 'Spacing' ) }>
+					<DimensionControl
+						label={ __( 'Padding' ) }
+						value={ attributes.paddingSize }
+						onChange={ partialRight(
+							updateSpacing,
+							'paddingSize'
+						) }
+						help={ __(
+							'Adjust spacing around content within the block.'
+						) }
+					/>
+
+					<DimensionControl
+						label={ __( 'Margin' ) }
+						value={ attributes.marginSize }
+						onChange={ partialRight( updateSpacing, 'marginSize' ) }
+						help={ __(
+							'Adjust spacing on the sides of the block.'
+						) }
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<BackgroundColor>
 				<TextColor>
-					<div className={ className } ref={ ref }>
+					<div className={ classes } ref={ ref }>
 						<div className="wp-block-group__inner-container">
 							<InnerBlocks
 								renderAppender={
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
index 6d248efbfc257..83ecc2996f8fa 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -16,6 +16,9 @@ export default function save( { attributes } ) {
 		customTextColor,
 	} = attributes;
 
+	const hasPadding = !! attributes.paddingSize;
+	const hasMargin = !! attributes.marginSize;
+
 	const backgroundClass = getColorClassName(
 		'background-color',
 		backgroundColor
@@ -24,6 +27,10 @@ export default function save( { attributes } ) {
 	const className = classnames( backgroundClass, textClass, {
 		'has-text-color': textColor || customTextColor,
 		'has-background': backgroundColor || customBackgroundColor,
+		'has-padding': hasPadding,
+		'has-margin': hasMargin,
+		[ `padding-${ attributes.paddingSize }` ]: hasPadding,
+		[ `margin-${ attributes.marginSize }` ]: hasMargin,
 	} );
 
 	const styles = {
diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index 61e711c3aaa2f..f1388bb3af1a5 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -7,3 +7,54 @@
 		margin-bottom: 0;
 	}
 }
+
+.wp-block-group {
+
+	.editor-styles-wrapper & {
+		// Adds animation to improve abilty for users to perceive
+		// the change occuring within the Editor
+		@include reduce-motion("transition");
+		transition: 0.2s ease-out;
+		transition-property: margin, padding;
+	}
+
+	&.padding-none {
+		padding: 0;
+	}
+
+	&.padding-small {
+		padding: $block-padding;
+	}
+
+	&.padding-medium {
+		padding: $block-padding*2;
+	}
+
+	&.padding-large {
+		padding: $block-padding*3;
+	}
+
+	&.padding-xlarge {
+		padding: $block-padding*4;
+	}
+
+	&.margin-none {
+		margin: 0;
+	}
+
+	&.margin-small {
+		margin: $block-padding;
+	}
+
+	&.margin-medium {
+		margin: $block-padding*2;
+	}
+
+	&.margin-large {
+		margin: $block-padding*3;
+	}
+
+	&.margin-xlarge {
+		margin: $block-padding*4;
+	}
+}
diff --git a/packages/components/src/dimension-control/index.js b/packages/components/src/dimension-control/index.js
index 0ed09d86014f5..8a52cabacdf2a 100644
--- a/packages/components/src/dimension-control/index.js
+++ b/packages/components/src/dimension-control/index.js
@@ -28,6 +28,7 @@ export function DimensionControl( props ) {
 		icon,
 		onChange,
 		className = '',
+		help = '',
 	} = props;
 
 	const onChangeSpacingSize = ( val ) => {
@@ -72,6 +73,7 @@ export function DimensionControl( props ) {
 			value={ value }
 			onChange={ onChangeSpacingSize }
 			options={ formatSizesAsOptions( sizes ) }
+			help={ help }
 		/>
 	);
 }
diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
index 7f1481747dfe1..302941fb4dc4a 100644
--- a/packages/components/src/dimension-control/style.scss
+++ b/packages/components/src/dimension-control/style.scss
@@ -10,13 +10,20 @@
 		align-items: center;
 		margin-right: 1em;
 		margin-bottom: 0;
+		width: 10em; // ensure labels and fields align right
 
 		.dashicon {
 			margin-right: 0.5em;
+			flex-shrink: 0;
 		}
 	}
 
-	&.is-manual .components-base-control__label {
-		width: 10em;
+	.components-base-control__help {
+		display: flex;
+		align-items: center;
+		margin-top: -4px;
+		margin-left: auto;
+		margin-bottom: 0;
+		padding-left: 7em;
 	}
 }
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 45b7a137fb9c8..161bd6941fabe 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -3,6 +3,7 @@
 exports[`DimensionControl rendering renders with custom sizes 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -36,6 +37,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 exports[`DimensionControl rendering renders with defaults 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -77,6 +79,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -130,6 +133,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.json b/packages/e2e-tests/fixtures/blocks/core__group.json
index 71d94f926dccc..f2f1df46cc1a1 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.json
@@ -5,7 +5,11 @@
         "isValid": true,
         "attributes": {
             "backgroundColor": "secondary",
-            "align": "full"
+            "align": "full",
+            "marginSize": "",
+            "marginUnit": "px",
+            "paddingSize": "",
+            "paddingUnit": "px"
         },
         "innerBlocks": [
             {