diff --git a/widgets/social-media-buttons/social-media-buttons.php b/widgets/social-media-buttons/social-media-buttons.php
index cad414b77..076e6c966 100644
--- a/widgets/social-media-buttons/social-media-buttons.php
+++ b/widgets/social-media-buttons/social-media-buttons.php
@@ -46,6 +46,7 @@ public function get_widget_form() {
 			$network_names[ $key ] = $value['label'];
 		}
 
+		$useable_multi_units = array( 'px', '%', 'em' );
 		return array(
 			'title' => array(
 				'type' => 'text',
@@ -154,14 +155,9 @@ public function get_widget_form() {
 						),
 					),
 					'icon_size'  => array(
-						'type'    => 'select',
+						'type'    => 'measurement',
 						'label'   => __( 'Icon size', 'so-widgets-bundle' ),
-						'options' => array(
-							'1'    => __( 'Normal', 'so-widgets-bundle' ),
-							'1.33' => __( 'Medium', 'so-widgets-bundle' ),
-							'1.66' => __( 'Large', 'so-widgets-bundle' ),
-							'2'    => __( 'Extra large', 'so-widgets-bundle' ),
-						),
+						'default' => '1em',
 					),
 					'rounding'   => array(
 						'type'    => 'select',
@@ -175,15 +171,9 @@ public function get_widget_form() {
 						),
 					),
 					'padding'    => array(
-						'type'    => 'select',
+						'type'    => 'measurement',
 						'label'   => __( 'Padding', 'so-widgets-bundle' ),
-						'default' => '1',
-						'options' => array(
-							'0.5' => __( 'Low', 'so-widgets-bundle' ),
-							'1'   => __( 'Medium', 'so-widgets-bundle' ),
-							'1.4' => __( 'High', 'so-widgets-bundle' ),
-							'1.8' => __( 'Very high', 'so-widgets-bundle' ),
-						),
+						'default' => '1em',
 					),
 					'align'      => array(
 						'type'    => 'select',
@@ -207,15 +197,28 @@ public function get_widget_form() {
 							'justify' => __( 'Justify', 'so-widgets-bundle' ),
 						),
 					),
-					'margin'     => array(
-						'type'    => 'select',
-						'label'   => __( 'Margin', 'so-widgets-bundle' ),
-						'default' => '0.1',
-						'options' => array(
-							'0.1' => __( 'Low', 'so-widgets-bundle' ),
-							'0.2' => __( 'Medium', 'so-widgets-bundle' ),
-							'0.3' => __( 'High', 'so-widgets-bundle' ),
-							'0.4' => __( 'Very high', 'so-widgets-bundle' ),
+					'margin' => array(
+						'type'         => 'multi-measurement',
+						'autofill'     => true,
+						'label'        => __( 'Margin', 'so-widgets-bundle' ),
+						'default'      => '0.1em 0.1em 0.1em 0em',
+						'measurements' => array(
+							'top' => array(
+								'label' => __( 'Margin Top', 'so-widgets-bundle' ),
+								'units' => $useable_multi_units,
+							),
+							'right' => array(
+								'label' => __( 'Margin Right', 'so-widgets-bundle' ),
+								'units' => $useable_multi_units,
+							),
+							'bottom' => array(
+								'label' => __( 'Margin Bottom', 'so-widgets-bundle' ),
+								'units' => $useable_multi_units,
+							),
+							'left' => array(
+								'label' => __( 'Margin Left', 'so-widgets-bundle' ),
+								'units' => $useable_multi_units,
+							),
 						),
 					),
 				),
@@ -261,6 +264,28 @@ public function modify_instance( $instance ) {
 			}
 		}
 
+		if ( ! empty( $instance['design'] ) && ! isset( $instance['design']['icon_size_unit'] ) ) {
+			$instance['design']['icon_size']      = $instance['design']['icon_size'] . 'em';
+			$instance['design']['icon_size_unit'] = 'em';
+			$instance['design']['padding']        = $instance['design']['padding'] . 'em';
+			$instance['design']['padding_unit']   = 'em';
+
+			// The margin value was previously changed based on the align setting.
+			$top = $right = $bottom = $left = $instance['design']['margin'] . 'em';
+			switch ( $instance['design']['align'] ) {
+				case 'left':
+					$left = '0em';
+					break;
+				case 'right':
+					$right = '0em';
+					break;
+				case 'center':
+					$left = $right = ( $instance['design']['margin'] * 0.5 ) . 'em';
+					break;
+			}
+			$instance['design']['margin'] = "$top $right $bottom $left";
+		}
+
 		return $instance;
 	}
 
@@ -294,36 +319,34 @@ public function get_less_variables( $instance ) {
 			return;
 		}
 
+		// Get responsive breakpoint and make sure it's properly formatted
+		$breakpoint = $this->get_global_settings( 'responsive_breakpoint' );
+
 		$design = $instance['design'];
-		$m = $design['margin'];
-		$top = $right = $bottom = $left = $m . 'em';
-		switch ( $design['align'] ) {
+		$less_vars = array(
+			'icon_size'             => $design['icon_size'],
+			'rounding'              => $design['rounding'] . 'em',
+			'padding'               => $design['padding'],
+			'align'                 => $design['align'],
+			'mobile_align'          => ! empty( $design['mobile_align'] ) ? $design['mobile_align'] : '',
+			'responsive_breakpoint' => ! empty( $breakpoint ) ? $breakpoint : '',
+		);
+
+		$margin = explode( ' ', $design['margin'] );
+		switch ( $less_vars['align'] ) {
 			case 'left':
-				$left = '0';
+				$margin[3] = 0;
 				break;
-
 			case 'right':
-				$right = '0';
+				$margin[1] = 0;
 				break;
-
 			case 'center':
-				$left = $right = ( $m * 0.5 ) . 'em';
+				$margin[3] = $margin[1] = 'auto';
 				break;
 		}
-		$margin = $top . ' ' . $right . ' ' . $bottom . ' ' . $left;
+		$less_vars['margin'] = implode( ' ', $margin );
 
-		// Get responsive breakpoint and make sure it's properly formatted
-		$breakpoint = $this->get_global_settings( 'responsive_breakpoint' );
-
-		return array(
-			'icon_size'             => $design['icon_size'] . 'em',
-			'rounding'              => $design['rounding'] . 'em',
-			'padding'               => $design['padding'] . 'em',
-			'align'                 => $design['align'],
-			'mobile_align'          => ! empty( $design['mobile_align'] ) ? $design['mobile_align'] : '',
-			'responsive_breakpoint' => ! empty( $breakpoint ) ? $breakpoint : '',
-			'margin'                => $margin,
-		);
+		return $less_vars;
 	}
 
 	public function less_generate_calls_to( $instance, $args ) {