Spacer Edit

Spacer is a primitive layout component that providers inner (padding) or outer (margin) space in-between components. It can also be used to adaptively provide space within an HStack or VStack.

Spacer comes with a bunch of shorthand props to adjust margin and padding. The values of these props work as a multiplier to the library’s grid system (base of 4px).

import {
    __experimentalSpacer as Spacer,
    __experimentalHeading as Heading,
    __experimentalView as View,
} from '@wordpress/components';

function Example() {
    return (
        <View>
            <Spacer>
                <Heading>WordPress.org</Heading>
            </Spacer>
            <Text>Code is Poetry</Text>
        </View>
    );
}

The children elements.

• Required: No

Adjusts all margins.

• Required: No

Adjusts bottom margin, potentially overriding the value from the more generic margin and marginY props.

• Required: No
• Default: 2

Adjusts left margin, potentially overriding the value from the more generic margin and marginX props.

• Required: No

Adjusts right margin, potentially overriding the value from the more generic margin and marginX props.

• Required: No

Adjusts top margin, potentially overriding the value from the more generic margin and marginY props.

• Required: No

Adjusts left and right margins, potentially overriding the value from the more generic margin prop.

• Required: No

Adjusts top and bottom margins, potentially overriding the value from the more generic margin prop.

• Required: No

Adjusts all padding.

• Required: No

Adjusts bottom padding, potentially overriding the value from the more generic padding and paddingY props.

• Required: No

Adjusts left padding, potentially overriding the value from the more generic padding and paddingX props.

• Required: No

Adjusts right padding, potentially overriding the value from the more generic padding and paddingX props.

• Required: No

Adjusts top padding, potentially overriding the value from the more generic padding and paddingY props.

• Required: No

Adjusts left and right padding, potentially overriding the value from the more generic padding prop.

• Required: No

Adjusts top and bottom padding, potentially overriding the value from the more generic padding prop.

• Required: No