Spacer
Vertical spacing in emails is inconsistent. The spacer component will help you create the space you need, the same on every device and client.
Basics
Vertical spacing between email clients is not as simple as it sounds, in fact, it’s consistently inconsistent. Versions of Outlook don’t respect margin and padding the same and
’s are different all over the place.
The spacer is used to create vertical spacing between elements. The size size="x" attribute allows you to set the height in pixels of vertical spacing you need.
import { StyleProvider, Container, Text, Spacer } from "@muil/components";
<StyleProvider>
<Container>
<Text>Stuff on top</Text>
<Spacer size="100" />
<Text>Stuff on bottom</Text>
<Text>Stuff above...</Text>
<Spacer sizeSmall={40} sizeLarge={100} />
<Text>...stuff below.</Text>
</Container>
</StyleProvider>;
Properties
Property | Type | Description |
---|---|---|
size | String | size of space in px |
sizeSmall | String | size of space in px in small screen |
sizeLarge | String | size of space in px in large screen |
className | String | class name |
style | Object | style |