diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
index 4f7b06a38587d1..05c65444860520 100644
--- a/core-blocks/image/editor.scss
+++ b/core-blocks/image/editor.scss
@@ -103,3 +103,24 @@
 		margin: -1px;
 	}
 }
+
+// Although the float markup is different in the editor compared to the frontend,
+// this CSS uses the same technique to allow floats in a wide images context.
+// That is, the block retains its centering and max-width, and a child inside
+// is floated instead of the block itself.
+[data-type="core/image"][data-align="center"],
+[data-type="core/image"][data-align="left"],
+[data-type="core/image"][data-align="right"] {
+	.editor-block-list__block-edit {
+		figure {
+			margin: 0;
+			display: table;
+		}
+
+		// This maps to the figure on the frontend.
+		.editor-rich-text {
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index e26bf5839040ec..dd94a892eff15c 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -346,7 +346,6 @@
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
-		margin-bottom: 0;
 		height: 0;
 
 		// Hide block outline when an image is floated.
@@ -354,6 +353,9 @@
 			&:before {
 				content: none;
 			}
+
+			// This margin won't collapse on its own, so zero it out.
+			margin-top: 0;
 		}
 
 		// Keep a 1px margin to compensate for the border/outline.