skill-assessment-app/vendor/assets/foundation-emails/docs/pages/spacer.md
2016-08-21 13:41:47 -05:00

27 lines
980 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Spacer
description: Vertical spacing in emails is inconsistent. The spacer component will help you create the space you need, the same on every device and client.
tags:
- spacing
- height
- margin
- padding
---
## Basics
Vertical spacing between email clients is not as simple as it sounds, in fact, its consistently inconsistent. Versions of Outlook dont respect margin and padding the same and `<br>`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.
When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure for you. You can use them between rows, containers or inside wrappers, rows, columns, and containers.
```inky_example
<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>
```
In this example, this spacer will create 100px of vertical spacing.