A Divider is basically a thin horizontal line that separates content areas.
Similar to Spacers, Dividers provide consistent vertical spacing while also offering visual separation of your content.
To create a Divider, we can use a regular
<hr class="border-0 bg-slate-500 text-gray-500 h-px">
How it works
- We first reset the
border-width, so we can apply our own colors
- We use a combination of
color- the latter is for Outlook (Windows)
- Removing the border means the element now has no
height, so we use
h-pxto set it to
<hr> Divider is based on Mark Robbins' excellent work, available at goodemailcode.com.
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.
<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.
<hr class="border-0 bg-slate-500 text-slate-500 h-px w-[400px] max-w-full">
Need a custom width for mobile devices? Use the
<hr class="border-0 bg-slate-500 text-slate-500 h-px sm:w-16 max-w-full">
You may customize top and bottom spacing with CSS margins.
For example, let's add
32px to the top and bottom:
<hr class="border-0 bg-slate-500 text-slate-500 h-px my-8">
Need uneven spacing?
<hr class="border-0 bg-slate-500 text-slate-500 h-px mt-4 mb-8">
<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
You can use the
align attribute to align a Divider.
<hr align="right" class="border-0 bg-slate-500 text-slate-500 h-px mt-4 mb-8">
By default, it will be centered.
For a vertical Divider, simply use a narrow width and a bigger height:
<hr class="border-0 bg-slate-500 text-slate-500 w-px h-16 m-0">
The spacing above and below the Table Divider line is defined through the vertical padding of the inner
<td> element, with Tailwind CSS utilities:
<table class="w-full"> <tr> <td class="py-6"> <div class="bg-slate-300 h-px leading-px">&zwnj;</div> </td> </tr> </table>
How it works:
- py-24 adds 24px top and bottom padding
<div>is the horizontal line: we set its height and line-height to 1px, and give it a background color
- we use a
&zwnj;to add something inside the
<div>, so it can take up height
Feel free to use
&nbsp; instead of
&zwnj;, both work just fine 👌
<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-leading-exactly class that is available from the
tailwindcss-mso plugin (included in the Starter).
<table class="w-full"> <tr> <td class="py-6"> <div class="bg-slate-300 h-px leading-px mso-leading-exactly">&zwnj;</div> </td> </tr> </table>