diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index bca7a3dc5f6547..b21da6083fc612 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/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 16fdc282020e0c..5e9c703c869b55 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -4,8 +4,7 @@
 	position: relative;
 }
 
-.block-editor-rich-text__editable {
-	margin: 0;
+.editor-rich-text__editable {
 	position: relative;
 	// In HTML, leading and trailing spaces are not visible, and multiple spaces
 	// elsewhere are visually reduced to one space. This rule prevents spaces
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index c11243504016aa..b918ffe4a88a7d 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -6,7 +6,7 @@
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
-	margin: 0 0 1.5em 0;
+	margin: 0 0 2em 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
index 2a58a2a4155ba5..d794da53de2170 100644
--- a/packages/block-library/src/heading/editor.scss
+++ b/packages/block-library/src/heading/editor.scss
@@ -6,42 +6,5 @@
 	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/heading/theme.scss b/packages/block-library/src/heading/theme.scss
new file mode 100644
index 00000000000000..b7cfe500c14c11
--- /dev/null
+++ b/packages/block-library/src/heading/theme.scss
@@ -0,0 +1,66 @@
+// 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;
+}
+
+// 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;
+}
diff --git a/packages/block-library/src/paragraph/theme.scss b/packages/block-library/src/paragraph/theme.scss
new file mode 100644
index 00000000000000..fe039470f4fe6b
--- /dev/null
+++ b/packages/block-library/src/paragraph/theme.scss
@@ -0,0 +1,4 @@
+p {
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index 1d679a32ece8fc..2a3c258fc9e981 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -1,7 +1,7 @@
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid $dark-gray-100;
-	margin: 1.65em auto;
+	margin: 2em auto;
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index f9a53b92214177..6ecbdff8c507f1 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -120,7 +120,7 @@
 	font-size: 13px;
 }
 
-.has-regular-font-size, // not used now, kept because of backward compatibility.
+.has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
 	font-size: 16px;
 }
@@ -133,7 +133,32 @@
 	font-size: 36px;
 }
 
-.has-larger-font-size, // not used now, kept because of backward compatibility.
+.has-larger-font-size, // Not used now, kept because of backward compatibility.
 .has-huge-font-size {
 	font-size: 42px;
 }
+
+
+/**
+ * Vanilla Block Editor Styles
+ * 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.
+ */
+
+// Gutenberg specific elements
+.editor-default-block-appender__content,
+.components-placeholder {
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
+
+// Apply some base margins to blocks that need them.
+// Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index 7a4dcce562f8ac..7795c46d535054 100644
--- a/packages/block-library/src/theme.scss
+++ b/packages/block-library/src/theme.scss
@@ -1,7 +1,9 @@
 @import "./code/theme.scss";
+@import "./heading/theme.scss";
 @import "./preformatted/theme.scss";
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
+@import "./paragraph/theme.scss";
 @import "./search/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index e925344dc9e3a2..4168a23c297a99 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;
 		}
 
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index aa3ee7cbc79958..b4d5f6740534a5 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -70,9 +70,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 almost 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 4b8b9e39491402..8c99c4c8c0bf0b 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -112,8 +112,8 @@ body.block-editor-page {
 }
 
 .block-editor__container {
-	// on mobile the main content area has to scroll
-	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
+	// On mobile the main content area has to scroll, otherwise you can
+	// invoke the overscroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
 		position: absolute;
 		top: 0;
@@ -132,15 +132,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..aa851eb7e0fc6b 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -12,8 +12,8 @@ p {
 
 ul,
 ol {
-	margin: 0;
-	padding: 0;
+	margin: 1em 0;
+	padding: inherit;
 
 	li {
 		// This overrides a bottom margin globally applied to list items in wp-admin.