diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index e4844ef629a8b1..f253a9c20aa172 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -56,6 +56,8 @@ $block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // spac
 
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance;
 
+$default-block-margin: $block-padding * 2 + $block-spacing; // This is the default margin between blocks.
+
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;
 $button-style__radius-round: 50%;
diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
index 695725a9ea910a..2ff5d6079d5131 100644
--- a/edit-post/assets/stylesheets/main.scss
+++ b/edit-post/assets/stylesheets/main.scss
@@ -91,8 +91,8 @@ body.gutenberg-editor-page {
 }
 
 .gutenberg__editor {
-	// 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, causing (ノಠ益ಠ)ノ彡┻━┻.
 	@include break-small {
 		position: absolute;
 		top: 0;
@@ -102,11 +102,42 @@ body.gutenberg-editor-page {
 		min-height: calc( 100vh - #{ $admin-bar-height-big } );
 	}
 
-	// The WP header height changes at this breakpoint
+	// The WP header height changes at this breakpoint.
 	@include break-medium {
 		min-height: calc( 100vh - #{ $admin-bar-height } );
 	}
 
+	.components-navigate-regions {
+		height: 100%;
+	}
+}
+
+/**
+ * Vanilla editor styles
+ */
+
+.gutenberg__editor {
+
+	// Gutenberg specific elements
+	.editor-default-block-appender__content,
+	.components-placeholder {
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
+	}
+
+	// Core blocks
+	[ class*="wp-block-" ] {
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
+	}
+
+	p,
+	ul,
+	ol {
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
+	}
+
 	img {
 		max-width: 100%;
 		height: auto;
@@ -115,10 +146,6 @@ body.gutenberg-editor-page {
 	iframe {
 		width: 100%;
 	}
-
-	.components-navigate-regions {
-		height: 100%;
-	}
 }
 
 // Override core input styles to provide ones consistent with Gutenberg
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index e26bf5839040ec..8e3d2111f985f1 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -136,16 +136,6 @@
 	.editor-block-list__block:first-child .editor-block-list__block-edit {
 		margin-top: $block-padding - $block-spacing / 2;
 	}
-
-	// 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.
-	.editor-default-block-appender__content,
-	.editor-block-list__block .editor-block-list__block-edit,
-	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
-	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceding rule.
-		margin-top: $block-padding * 2 + $block-spacing;
-		margin-bottom: $block-padding * 2 + $block-spacing;
-	}
 }
 
 .editor-block-list__layout .editor-block-list__block {