Use padding to optically size multiple buttons.

packages/base-styles/_variables.scss

@@ -93,8 +93,8 @@ $widget-area-width: 700px;
  */
 
 $border-width: 1px;
-$block-controls-height: 36px; // @todo: This should be deprecated in favor of 48px block control heights.
-$icon-button-size: 36px; // @todo: This should be deprecated in favor of 48px block control heights.
+$block-controls-height: 36px;
+$icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: $grid-unit-60;

packages/block-editor/src/components/block-toolbar/style.scss

@@ -30,7 +30,6 @@
 
 		// IE11 has thick paddings without this.
 		line-height: 0;
-
 	}
 
 	// Remove the left-border on the last item in the toolbar.
@@ -48,6 +47,36 @@
 			border-color: $light-gray-500;
 		}
 	}
+
+	// Size multiple sequential buttons to be optically balanced.
+	// Specifically, buttons in a toolbar group are not all 48px.
+	// Icons are 36px, as set by a 24px icon and 12px padding.
+	.components-toolbar > div > .components-button.has-icon:not(.has-text) {
+		width: auto;
+		padding-left: $grid-unit-15 / 2; // 6px.
+		padding-right: $grid-unit-15 / 2;
+
+		svg {
+			min-width: $icon-button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+	}
+
+	// First and last buttons in a group have 12px outer padding, like 48px buttons.
+	.components-toolbar > div:first-child .components-button.has-icon:not(.has-text) {
+		padding-left: $grid-unit-15;
+		padding-right: 0;
+	}
+
+	.components-toolbar > div:last-child .components-button {
+		padding-left: 0;
+		padding-right: $grid-unit-15;
+	}
+
+	// Single buttons should remain 48px.
+	.components-toolbar > div:first-child:last-child > .components-button.has-icon:not(.has-text) {
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+	}
 }
 
 // Inserter in the toolbar for tabbing into.

packages/block-editor/src/components/rich-text/format-toolbar/style.scss

@@ -1,24 +1,14 @@
 .block-editor-format-toolbar {
-	// Size the formatting buttons to be optically balanced.
-	// Specifically, buttons in a toolbar group are not all 48px.
-	// They are 36px, except for the first and the last, which have
-	// an additional 6px padding left or right.
-	.components-toolbar > div {
-		width: 48px - 6px - 6px;
-	}
-
-	.components-toolbar > div:first-child button {
-		padding-left: $grid-unit-10 + 6px;
-	}
-
-	.components-toolbar > div:last-child button {
-		padding-right: $grid-unit-10 + 6px;
-	}
-
 	.components-dropdown-menu__toggle {
 		justify-content: center;
+
+		// @todo: this should be the same icon as the DownArrow from the mover control.
 		&::after {
 			@include dropdown-arrow();
+
+			// The dropdown is 6px wide. To have the same footprint as a 24px icon, we add 9px margin left and right.
+			margin-left: 9px;
+			margin-right: 9px;
 		}
 	}
 }