Div
The simplest, most reliable way to create a visual, horizontal divider line in HTML emails is to use a<div> element:
emails/example.html
separator role indicates that this is a divider that separates and distinguishes sections of content.
You may adjust the top and bottom spacing around the divider with margin utilities:
emails/example.html
Semantic
To create a semantic Divider, we can use a regular<hr> element:
emails/example.html
How it works
- We first reset the
border-width, so we can apply our own colors - We use a combination of
background-colorandcolor- the latter is for Outlook (Windows) - Removing the border means the element now has no
height, so we useh-pxto set it to1px
<hr> Divider is based on Mark Robbins’ excellent work, available at goodemailcode.com.
Customization
You can customize the divider and give it a custom width or height, change its color, the top/bottom space around it, and even its alignment.Width
An<hr> goes full width by default, but we can set a custom width.
While we’re at it, let’s also use max-w-full, to make it responsive.
emails/example.html
sm breakpoint:
emails/example.html
Margin
You may customize top and bottom spacing with CSS margins. For example, let’s add32px to the top and bottom:
emails/example.html
emails/example.html
Note that
<hr> elements come with margins by default, so you might want to set a custom one or reset it with m-0. For example, Chrome resets to 8px.Alignment
You can use thealign attribute to align a Divider.
emails/example.html
Vertical
For a vertical Divider, simply use a narrow width and a bigger height:emails/example.html
Outlook note
The<hr> divider is harder to control in Outlook on Windows - it usually renders wider than intended and you can’t use left/right CSS margins.
A proposed solution, as seen in Mark’s example, is to wrap it in a <div> and add margins to that instead:
emails/example.html
<hr> divider has been hard to control in Outlook on Windows, so we recommend using the Div or Table Divider.
The Maizzle Starter includes a Divider component that uses the <div> technique.
Table divider
The spacing above and below the Table Divider line is defined through the vertical padding of the inner<td> element, with Tailwind CSS utilities:
emails/example.html
py-6adds 24px top and bottom padding- the
<div>is the horizontal line: we set its height and line-height to 1px, and give it a background color - we use a
‍to add something inside the<div>, so it can take up height
instead of ‍ - both work just fine.
Outlook note
The<div> element where we use leading-px needs some extra attention for Outlook. Otherwise, it will render thicker than intended.
To make Outlook respect the line height you set on elements, you may use the mso-line-height-rule-exactly class that is available from the tailwindcss-mso plugin (included in the Starter).
emails/example.html