# Spacing

The Spacing field allows the user to specify either padding or margin units to any HTML element or CSS selector that supports them.

# Arguments

Name Type
type string spacing Value identifying the field type.
units array/string String of a single unit or array of units.  Accepts: false, %, in, cm, mm, em, rem, ex, pt, pc, px, vh, vw, vmin, vmax, ch.
units_extended bool false Flag to allow users to select any type of unit.
display_units bool true Flag to set the display of the units field when units are specified.
top bool true Flag to display the top value input.
bottom bool true Flag to display the bottom value input.
left bool true Flag to display the left value input.
right bool true Flag to display the right value input.
all bool false Flag to display all position value inputs.
mode string padding Accepts:  absolute padding or margin.
select2 array Array of select2 arguments. Select2 Documentation(opens new window) .

# Default Options

Name Type Description
*-top string Sets the top spacer value.
*-right string Sets the right spacer value.
*-bottom string Sets the bottom spacer value.
*-left string Sets the left spacer value.
units string Sets the default unit value in the unit selector.


The asterisk at the beginning of these values is a wildcard value to be replaced with the mode name. For example, if the chosen mode is margin, the default names would be specified as margin-top, margin-left, etc. If the chosen mode is padding, the default names would be specified as padding-top, padding-left, etc. When specifying your own units array, it will override the units-extended argument.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'spacing'
) );

# Example Config

Redux::addField( 'OPT_NAME', 'SECTION_ID', array(
    'id'             => 'opt-spacing',
    'type'           => 'spacing',
    'output'         => array('.site-header'),
    'mode'           => 'margin',
    'units'          => array('em', 'px'),
    'units_extended' => 'false',
    'title'          => __('Padding/Margin Option', 'redux-framework-demo'),
    'subtitle'       => __('Allow your users to choose the spacing or margin they want.', 'redux-framework-demo'),
    'desc'           => __('You can enable or disable any piece of this field. Top, Right, Bottom, Left, or Units.', 'redux-framework-demo'),
    'default'            => array(
        'margin-top'     => '1px', 
        'margin-right'   => '2px', 
        'margin-bottom'  => '3px', 
        'margin-left'    => '4px',
        'units'          => 'em', 
) );

# Example Usage

This example in based on the example usage provided above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo;

echo 'Spacing top: '    . $redux_demo['opt-spacing']['margin-top'];
echo 'Spacing bottom: ' . $redux_demo['opt-spacing']['margin-bottom'];
echo 'Spacing left: '   . $redux_demo['opt-spacing']['margin-left'];
echo 'Spacing right: '  . $redux_demo['opt-spacing']['margin-right'];