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.
Table of contents Table of contents
Usage Usage
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>
);
}
Props Props
margin: number margin: number
Adjusts all margins.
- Required: No
marginY: number marginY: number
Adjusts top and bottom margins, potentially overriding the value from the more generic margin prop.
- Required: No
marginX: number marginX: number
Adjusts left and right margins, potentially overriding the value from the more generic margin prop.
- Required: No
marginTop: number marginTop: number
Adjusts top margin, potentially overriding the value from the more generic margin and marginY props.
- Required: No
marginBottom: number marginBottom: number
Adjusts bottom margin, potentially overriding the value from the more generic margin and marginY props.
- Required: No
- Default:
2
marginLeft: number marginLeft: number
Adjusts left margin, potentially overriding the value from the more generic margin and marginX props.
- Required: No
marginRight: number marginRight: number
Adjusts right margin, potentially overriding the value from the more generic margin and marginX props.
- Required: No
padding: number padding: number
Adjusts all padding.
- Required: No
paddingY: number paddingY: number
Adjusts top and bottom padding, potentially overriding the value from the more generic padding prop.
- Required: No
paddingX: number paddingX: number
Adjusts left and right padding, potentially overriding the value from the more generic padding prop.
- Required: No
paddingTop: number paddingTop: number
Adjusts top padding, potentially overriding the value from the more generic padding and paddingY props.
- Required: No
paddingBottom: number paddingBottom: number
Adjusts bottom padding, potentially overriding the value from the more generic padding and paddingY props.
- Required: No
paddingLeft: number paddingLeft: number
Adjusts left padding, potentially overriding the value from the more generic padding and paddingX props.
- Required: No
paddingRight: number paddingRight: number
Adjusts right padding, potentially overriding the value from the more generic padding and paddingX props.
- Required: No