The Margin & Padding controls are 2 dedicated spacing controls. They work flawlessly with the output argument and allow you to specify a unit via the choices argument (see the Padding Control example below). The unit defaults to px if not specified.

The Margin & Padding controls are different from the Dimensions control as they share the same unit across all 4 possible values.

Margin Control

new \Kirki\Pro\Field\Margin(
	[
		'settings'    => 'kirki_pro_margin',
		'label'       => esc_html__( 'Margin Control', 'kirki' ),
		'section'     => 'section_id',
		'default'     => [
			'top'    => 40,
			'right'  => 40,
			'bottom' => 40,
			'left'   => 40,
		],
		'transport'   => 'postMessage',
		'output'      => [
			[
				'element' => '.container',
			],
		],
	]
);

Padding Control

new \Kirki\Pro\Field\Padding(
	[
		'settings'    => 'kirki_pro_padding',
		'label'       => esc_html__( 'Padding Control', 'kirki' ),
		'description' => 'Example description.',
		'section'     => 'section_id',
		'default'     => [
			'top'    => 2,
			'bottom' => 2,
		],
		'transport'   => 'postMessage',
		'tooltip'     => esc_html__( 'Example tooltip', 'kirki' ),
		'choices'     => [
			'unit' => 'em',
		],
		'output'      => [
			[
				'element' => '.entry-title',
			],
		],
	]
);

---

Usage

To manually retrieve the margin/padding values, you can do something like this:

$margins = get_theme_mod( 'kirki_pro_margin', [] );

$margin_top    = isset( $margins['top'] ) ? $margins['top'] : '';
$margin_right  = isset( $margins['right'] ) ? $margins['right'] : '';
$margin_bottom = isset( $margins['bottom'] ) ? $margins['bottom'] : '';
$margin_left   = isset( $margins['left'] ) ? $margins['left'] : '';