diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 6e9a40c31034e3..b2de4e4a74b55b 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -9,6 +9,7 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
 $text-editor-font-size: 14px;
 $editor-line-height: 1.8;
 $big-font-size: 18px;
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 7e1a87bc2febd3..cbd3098e765d6e 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -56,15 +56,6 @@
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 	}
-
-	// Space every block, and the default appender, using margins.
-	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
-	.block-editor-default-block-appender > .block-editor-default-block-appender__content,
-	> .block-editor-block-list__block > .block-editor-block-list__block-edit,
-	> .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit {
-		margin-top: $block-padding * 2 + $block-spacing;
-		margin-bottom: $block-padding * 2 + $block-spacing;
-	}
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index d9728e201c1eca..aa1d934d7bb06b 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -13,6 +13,8 @@
 		outline: $border-width solid transparent;
 		transition: 0.2s outline;
 		resize: none;
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
 
 		// Emulate the dimensions of a paragraph block.
 		// On mobile and in nested contexts, the plus to add blocks shows up on the right.
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 713e508bef0553..62034a5cfc8e63 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -10,14 +10,17 @@
 }
 
 .wp-block-button {
-	display: inline-block;
-	margin-bottom: 0;
 	position: relative;
 
 	[contenteditable] {
 		cursor: text;
 	}
 
+	// Don't let placeholder expand parent width.
+	.block-editor-rich-text {
+		display: inline-block;
+	}
+
 	// Make placeholder text white unless custom colors or outline versions are chosen.
 	&:not(.has-text-color):not(.is-style-outline) .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable {
 		color: $white;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 9fb53733a2d132..fc426e1c40eac1 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -2,7 +2,6 @@ $blocks-button__height: 56px;
 
 .wp-block-button {
 	color: $white;
-	margin-bottom: 1.5em;
 
 	&.aligncenter {
 		text-align: center;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index df861a04359c60..adfcf2bf7e132e 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -107,12 +107,18 @@
 					margin-left: -$border-width;
 				}
 
-				// The Column block is a child of the Columns block and is mostly a passthrough container.
-				// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
-				// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
+				// Zero out margins.
+				> [data-block] {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+
+				// The Columns block is a flex-container, therefore it nullifies margin collapsing.
+				// Therefore, blocks inside this will appear to create a double margin.
+				// We compensate for this using negative margins.
 				> div > .block-core-columns > .editor-inner-blocks {
-					margin-top: -$block-padding - $block-padding;
-					margin-bottom: -$block-padding - $block-padding;
+					margin-top: -$default-block-margin;
+					margin-bottom: -$default-block-margin;
 				}
 			}
 		}
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 2cc0cf0ec4999e..ab2ec375ca1e8e 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,5 +1,6 @@
 .wp-block-columns {
 	display: flex;
+	margin-bottom: $default-block-margin;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index e3fc37169eaeab..a0c659e1b93689 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -6,7 +6,6 @@
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
-	margin: 0 0 1.5em 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index cbdcda4e203ac2..c0c465d33ffbf3 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -10,7 +10,6 @@
 @import "./classic/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
-@import "./heading/editor.scss";
 @import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-comments/editor.scss";
@@ -34,3 +33,18 @@
 @import "./text-columns/editor.scss";
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
+
+
+/**
+ * Editor Normalization Styles
+ *
+ * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
+ * This allows us to create normalization styles that are easily overridden by editor styles.
+ */
+
+// Provide every block with a default base margin. This margin provides a consistent spacing
+// between blocks in the editor.
+[data-block] {
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
+}
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 3232b5c37a13ea..419fc365f468af 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -1,8 +1,15 @@
-// Override the default list style type _only in the editor_
-// to avoid :not() selector specificity issues.
-// See https://github.com/WordPress/gutenberg/pull/10358
-ul.wp-block-gallery li {
-	list-style-type: none;
+ul.wp-block-gallery {
+	// Override the default list style type _only in the editor_
+	// to avoid :not() selector specificity issues.
+	// See https://github.com/WordPress/gutenberg/pull/10358
+	li {
+		list-style-type: none;
+	}
+
+	// Override the bottom margin every block gets.
+	.is-selected & {
+		margin-bottom: 0;
+	}
 }
 
 .blocks-gallery-item {
diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
deleted file mode 100644
index 2a58a2a4155ba5..00000000000000
--- a/packages/block-library/src/heading/editor.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.wp-block-heading {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		color: inherit;
-		margin: 0;
-	}
-
-	// These follow a Major Third type scale
-	h1 {
-		font-size: 2.44em;
-	}
-
-	h2 {
-		font-size: 1.95em;
-	}
-
-	h3 {
-		font-size: 1.56em;
-	}
-
-	h4 {
-		font-size: 1.25em;
-	}
-
-	h5 {
-		font-size: 1em;
-	}
-
-	h6 {
-		font-size: 0.8em;
-	}
-
-	// Adjust line spacing for larger headings.
-	h1,
-	h2,
-	h3 {
-		line-height: 1.4;
-	}
-
-	h4 {
-		line-height: 1.5;
-	}
-}
diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
index 7e93bd2fe56886..2990803cb8eaae 100644
--- a/packages/block-library/src/html/editor.scss
+++ b/packages/block-library/src/html/editor.scss
@@ -1,17 +1,21 @@
-.wp-block-html .block-editor-plain-text {
-	font-family: $editor-html-font;
-	color: $dark-gray-800;
-	padding: 0.8em 1em;
-	border: 1px solid $light-gray-500;
-	border-radius: 4px;
+.wp-block-html {
+	margin-bottom: $default-block-margin;
 
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size;
-	@include break-small {
-		font-size: $default-font-size;
-	}
+	.block-editor-plain-text {
+		font-family: $editor-html-font;
+		color: $dark-gray-800;
+		padding: 0.8em 1em;
+		border: 1px solid $light-gray-500;
+		border-radius: 4px;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
 
-	&:focus {
-		box-shadow: none;
+		&:focus {
+			box-shadow: none;
+		}
 	}
 }
diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss
index b4706db6866790..5b5edb5b5c310c 100644
--- a/packages/block-library/src/more/editor.scss
+++ b/packages/block-library/src/more/editor.scss
@@ -1,6 +1,8 @@
 .block-editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .block-editor .wp-block-more { // needs specificity
diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss
index 3b5dd437e6f869..99f3679e5ae60d 100644
--- a/packages/block-library/src/nextpage/editor.scss
+++ b/packages/block-library/src/nextpage/editor.scss
@@ -1,5 +1,7 @@
 .block-editor-block-list__block[data-type="core/nextpage"] {
 	max-width: 100%;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .wp-block-nextpage {
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 41f7ba2a45ee8a..46bb9867586292 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,6 +1,7 @@
 .wp-block-pullquote {
 	border-top: 4px solid $dark-gray-500;
 	border-bottom: 4px solid $dark-gray-500;
+	margin-bottom: $default-block-margin;
 	color: $dark-gray-600;
 
 	cite,
diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
index 3826e0a998b3e8..12455da81199b9 100644
--- a/packages/block-library/src/quote/editor.scss
+++ b/packages/block-library/src/quote/editor.scss
@@ -1,7 +1,3 @@
-.wp-block-quote {
-	margin: 0;
-
-	&__citation {
-		font-size: $default-font-size;
-	}
+.wp-block-quote__citation {
+	font-size: $default-font-size;
 }
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index 8e6edd7d7ff867..c3b684b8e2b159 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,6 +1,6 @@
 .wp-block-quote {
 	border-left: 4px solid $black;
-	margin: 20px 0;
+	margin: 0 0 $default-block-margin 0;
 	padding-left: 1em;
 
 	cite,
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index 1d679a32ece8fc..80834e1ebf8392 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -1,7 +1,8 @@
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid $dark-gray-100;
-	margin: 1.65em auto;
+	margin-left: auto;
+	margin-right: auto;
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
index ffa3592b848688..cbb22c2ba15080 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -5,6 +5,7 @@
 	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
+	margin-bottom: $default-block-margin;
 
 	label {
 		display: flex;
diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
index ad8a55cea34994..77fba2118222a7 100644
--- a/packages/block-library/src/spacer/editor.scss
+++ b/packages/block-library/src/spacer/editor.scss
@@ -1,3 +1,7 @@
 .block-library-spacer__resize-container.is-selected {
 	background: $light-gray-200;
 }
+
+.block-library-spacer__resize-container {
+	margin-bottom: $default-block-margin;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 285c139b3b0fa4..83588d4f223dd2 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -141,8 +141,9 @@
 
 /**
  * Vanilla Block Styles
- * These are base styles that apply across blocks.
- * We should have as few of these as possible.
+ * These are base styles that apply across blocks, meant to provide a baseline.
+ * They are applied both to the editor and the theme, so we should have as few of these as possible.
+ * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
  */
 
 // Caption styles.
@@ -151,3 +152,13 @@
 figcaption {
 	margin-top: 0.5em;
 }
+
+// Apply some base styles to blocks that need them.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 895ea0d4065c80..63938e69498e95 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,5 +1,5 @@
 .components-placeholder {
-	margin: 0;
+	margin-bottom: $default-block-margin;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,10 +8,8 @@
 	min-height: 200px;
 	width: 100%;
 	text-align: center;
-	font-family: $default-font;
-	font-size: $default-font-size;
 
-	// use opacity to work in various editor styles
+	// Use opacity to work in various editor styles.
 	background: $dark-opacity-light-200;
 
 	.is-dark-theme & {
@@ -19,6 +17,13 @@
 	}
 }
 
+.components-placeholder__instructions,
+.components-placeholder__label,
+.components-placeholder__fieldset {
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
 .components-placeholder__label {
 	display: flex;
 	align-items: center;
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 159d208c4fd105..234eb46917b247 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -30,7 +30,7 @@
 	.editor-post-title__block {
 		textarea {
 			border: $border-width solid $light-gray-500;
-			margin-bottom: 4px;
+			margin-bottom: $block-spacing;
 			padding: $block-padding;
 
 			&:focus {
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index d0ec876d553152..5910de04cd026c 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -63,9 +63,10 @@
 	margin-left: auto;
 	margin-right: auto;
 
-	// Space title similarly to other blocks.
-	// This uses negative margins so as to not affect the default block margins.
-	margin-bottom: -$block-padding - $block-spacing - $border-width - $border-width;
+	// Apply default block margin below the post title.
+	// This ensures the first block on the page is in a good position.
+	// This rule can be retired once the title becomes an actual block.
+	margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
 
 	// Stack borders.
 	> div {
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index ae0225bc6c97e7..be47d4c70dc96d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -88,15 +88,6 @@ body.block-editor-page {
 		}
 	}
 
-	img {
-		max-width: 100%;
-		height: auto;
-	}
-
-	iframe {
-		width: 100%;
-	}
-
 	.components-navigate-regions {
 		height: 100%;
 	}
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
index 1efafd9445f49a..cd8b6657cbf4e3 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -1,3 +1,13 @@
+/**
+ * Editor Normalization Styles
+ *
+ * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming
+ * of the editor by themes.
+ * Why do these exist? Why not rely on browser defaults?
+ * These styles are necessary so long as CSS can bleed from the wp-admin into the editing canvas itself.
+ * Let's continue working to refactor these away, whether through Shadow DOM or better scoping of upstream styles.
+ */
+
 body {
 	font-family: $editor-font;
 	font-size: $editor-font-size;
@@ -5,15 +15,95 @@ body {
 	color: $dark-gray-900;
 }
 
+/* Headings */
+// These follow a Major Third type scale
+// https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600
+h1 {
+	font-size: 2.44em;
+}
+
+h2 {
+	font-size: 1.95em;
+}
+
+h3 {
+	font-size: 1.56em;
+}
+
+h4 {
+	font-size: 1.25em;
+}
+
+h5 {
+	font-size: 1em;
+}
+
+h6 {
+	font-size: 0.8em;
+}
+
+// Adjust line spacing for larger headings.
+h1,
+h2,
+h3 {
+	line-height: 1.4;
+}
+
+h4 {
+	line-height: 1.5;
+}
+
+// Default margins.
+h1 {
+	margin-top: 0.67em;
+	margin-bottom: 0.67em;
+}
+
+h2 {
+	margin-top: 0.83em;
+	margin-bottom: 0.83em;
+}
+
+h3 {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+h4 {
+	margin-top: 1.33em;
+	margin-bottom: 1.33em;
+}
+
+h5 {
+	margin-top: 1.67em;
+	margin-bottom: 1.67em;
+}
+
+h6 {
+	margin-top: 2.33em;
+	margin-bottom: 2.33em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: inherit;
+}
+
 p {
 	font-size: inherit;
 	line-height: inherit;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 ul,
 ol {
-	margin: 0;
-	padding: 0;
+	margin-bottom: $default-block-margin;
+	padding: inherit;
 
 	li {
 		// This overrides a bottom margin globally applied to list items in wp-admin.