1

What approaches are there to give an element padding and/or margin using Foundation For Emails 2 and its templating language Inky?

I have found two ways to add a padding to an element coding an email (that works in most mail clients):

  • give a td element padding

This is apparently the most commonly used approach to lay out an email. But when adopting Inky in your workflow, the td element is merged into the <container> element.

  • "Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered."

Here's the problem you'll have to stick to the grid. I have noticed you can customize in how many cells the grid is divided but still, the design would have to be making use of a grid as well.

These are the approaches I have found while googling and going through the documents of Foundation For Email 2. Am I overlooking something or did I misunderstand something or is Inky only meant to be used in combo with a grid-based design?

As an extra question, how would I align an element vertically using Inky?

6754534367
  • 5,123
  • 4
  • 17
  • 24

1 Answers1

0

I can answer my secondary question with the Foundation for Email 2.1 update:

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 <br>'s are different all over the place. Plus who wants to see <br><br><br> all over the place?

The new <spacer> component takes care of this.

<spacer size="16"></spacer>

The size is the height in pixels of vertical spacing you need.

6754534367
  • 5,123
  • 4
  • 17
  • 24