Spacing, Padding, White Space
Spacing is crucial for displaying content in an organized, breathable manner.
Use spacing to inform the hierarchy of content. Information that's related to each other should be closer together; disparate information should be further apart. Spacing should be consistent so the email flows in a digestible, predictable manner.
Adding space to an email is somewhat similar to using Leap. The naming scheme is similar, but there's an esg prefix and there aren't any sizes. Also, the spacing is defined in pixels instead of rem. Email clients use different baselines for rem, which results in an inconsistent handling of spacing across clients. Pixels are rendered the same across the board - hooray! The range is in 5 pixel increments, from 0 - 25 pixels.
These classes are used to apply equal spacing around the entire element.
These classes are used to apply spacing to a particular side of an element.
.esg-m-lr-1margin left + right
.esg-m-tb-1margin top + bottom
.esg-p-lr-3padding left + right
.esg-p-tb-4padding top + bottom
HR, Horizontal Rule, Horizontal Lined
The horizontal rule is a light grey line that spans the width of the email, inside of the padded area. It's formed by applying border to a TD element. This gives us more control over the styling than using the HR element, which would take a lot of code to override for various client HR styling.
It's a divider that segments content horizontally. It gives disparate sections space to communicate separate thoughts.
<table> <tr> <td class="esg-border-b"> </td> </tr> </table>