Use gap instead of margin.

packages/block-library/src/navigation/style.scss

@@ -221,35 +221,22 @@
 
 /**
  * Margins
- * @todo: refactor this to use gap.
  */
 
 // Menu items with no background.
-.wp-block-page-list,
-.wp-block-page-list > .wp-block-pages-list__item,
-.wp-block-navigation__container > .wp-block-navigation-link {
-	margin: 0 2em 0 0;
-
-	// Margin of right-most margin should be zero, for right aligned or justified items.
-	&:last-child {
-		margin-right: 0;
-	}
+.wp-block-navigation__container .wp-block-page-list,
+.wp-block-navigation__container {
+	gap: 0.5em 2em;
 }
 
 // Menu items with background.
 // We use :where to keep specificity minimal, yet still scope it to only the navigation block.
 // That way if padding is set in theme.json, it still wins.
 // https://css-tricks.com/almanac/selectors/w/where/
 .wp-block-navigation:where(.has-background) {
-	.wp-block-page-list,
-	.wp-block-page-list > .wp-block-pages-list__item,
-	.wp-block-navigation__container > .wp-block-navigation-link {
-		margin: 0 0.5em 0 0;
-
-		// Don't show right margin on the last child.
-		&:last-child {
-			margin: 0;
-		}
+	.wp-block-navigation__container .wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0 0.5em;
 	}
 }
 
@@ -341,7 +328,6 @@
 
 	// Vertical layout
 	.is-vertical & {
-		display: block;
 		flex-direction: column;
 		align-items: flex-start;
 	}
@@ -371,7 +357,6 @@
 
 	.wp-block-navigation-link,
 	.wp-block-pages-list__item {
-		margin-right: 0;
 		justify-content: flex-end;
 	}
 }