CSS Reset

Generic and email client-specific rendering defaults

Because email clients render HTML emails in so many different ways, Pine employs a handful of resets that aim to achieve an acceptable normalization level, to help you create more consistent layouts across the board.

Generic resets #

These apply to all supported email clients.

Container #

The container is center-aligned aslo through CSS, besides the HTML attribute. This is currently only needed in Yahoo! web.

Tables #

  • Adjacent cells share borders, as Pine defines border-collapse: collapse; for all tables.
  • Cell content is set to align vertically to the top, but can be overridden with inline CSS
  • Beautiful, golden ratio typography with native font stack is also set as a default for cell content

Images #

The image reset ensures no borders are added, avoids unwanted gaps below, and overrides the default content line-height. On mobile, in order to prevent blown-up layouts caused by images that are not using the fluid retina technique, they are reset to be responsive (100% wide, proportional height - of course, fluid retina overrides this, if used).

Components #

  • Navigation items are set to display: inline-block; for consistent alignment and spacing
  • Spacers and dividers include both generic and client-specific resets, for consistent vertical spacing

Client-specific #

These resets target specific email clients, and might be removed or updated in future Pine releases.

Outlook and Windows Mail #

#outlook a {padding: 0;} enables a "View in Browser" bar in Outlook for desktop:

Outlook view in browser

mso-line-height-rule:exactly; forces consistent line/height for spacers and dividers

Gmail iOS #

u ~ div .wrapper {min-width: 100vw;} forces the viewport to full width

Next Up: Typography →

Current Version