Spacer · Muil

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>;

Heat map

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