How to Use "mso-line-height-rule: exactly" in HTML Emails

"mso-line-height-rule: exactly" is one of the most important and most misunderstood MSO properties in HTML email design. It looks simple — one line — but getting it wrong breaks layouts silently across millions of Outlook inboxes.

What "mso-line-height-rule: exactly" Does

By default, Outlook (using Word's rendering engine) automatically adjusts line height to accommodate the tallest element on a line — images, large characters, superscripts, special glyphs like emojis. This is called auto line height.

Without "mso-line-height-rule: exactly" → Outlook decides the line height. Your value is a suggestion. With mso-line-height-rule: exactly → Outlook uses exactly the value you set. No adjustments.

In practice, this means a <td> or <p> you designed to be 24px tall can silently grow to 30px, 34px, or more in Outlook — shifting everything below it and breaking your layout.

The Syntax

<!-- On a paragraph -->
<p style="line-height: 24px; mso-line-height-rule: exactly;">
  Your text here.
</p>

<!-- On a table cell -->
<td style="line-height: 40px; mso-line-height-rule: exactly;">
  Button label
</td>

<!-- In a stylesheet -->
<style>
  p {
    line-height: 24px;
    mso-line-height-rule: exactly;
  }
</style>

It only has two possible values:

In practice, you will almost always want exactly.

How to Use "mso-line-height-rule: exactly"

In html emails, use a pattern that pairs mso-line-height-rule: exactly with mso-text-raise together for button cells:

<td style="
  line-height: 40px;
  mso-line-height-rule: exactly;
  mso-text-raise: 8px;
">
  <a style="
    line-height: 40px;
    mso-line-height-rule: exactly;
    mso-text-raise: 8px;
  ">Verify my account</a>
</td>

This is a two-part technique:

• line-height: 40px + mso-line-height-rule: exactly — locks the cell to exactly 40px height in Outlook
• mso-text-raise: 8px — nudges the text upward inside that locked space to visually center it

Without mso-line-height-rule: exactly here, Outlook would expand the button cell unpredictably, and mso-text-raise would have nothing reliable to work against.

Common Issues & Fixes when using "mso-line-height-rule: exactly"

Spacer Divs Growing in Outlook

What happens: You use a <div> with a fixed height as a spacer. Outlook ignores the height and renders it taller.

<!-- ❌ Broken — Outlook ignores height on empty divs -->
<div style="height: 40px;"></div>

<!-- ✅ Fixed — locked with line-height and mso rule -->
<div style="
  mso-line-height-rule: exactly;
  mso-line-height-alt: 40px;
  line-height: 40px;
  font-size: 1px;
  display: block;
">&nbsp;&nbsp;</div>

Do this exactly this for every spacer — using font-size: 1px, line-height: Npx, and mso-line-height-alt: Npx together. The    gives the div non-zero content so Outlook doesn't collapse it.

This is the canonical spacer pattern for HTML email.

Emoji and Special Characters Expanding Line Height

What happens: An emoji in a headline causes Outlook to auto-expand the line height of that entire line, pushing content below it down.

<!-- ❌ Risky — emoji triggers Outlook auto line-height expansion -->
<h1 style="line-height: 28px;">
  Please verify your email 😀
</h1>

<!-- ✅ Fixed — locked to exactly 28px regardless of glyph height -->
<h1 style="line-height: 28px; mso-line-height-rule: exactly;">
  Please verify your email 😀
</h1>

Do this on the <h1> that contains the emoji — a subtle but important detail. Without it, that heading silently breaks in Outlook.

Multi-line Text with Clipped Descenders

What happens: exactly is too aggressive for multi-line body text. At small line heights, descenders on letters like g, p, y, j get clipped.

<!-- ❌ Risky for body text — descenders may clip at tight line heights -->
<p style="font-size: 14px; line-height: 16px; mso-line-height-rule: exactly;">
  Typography is the art of arranging type...
</p>

<!-- ✅ Safer — give enough room for descenders -->
<p style="font-size: 14px; line-height: 22px; mso-line-height-rule: exactly;">
  Typography is the art of arranging type...
</p>

The rule: For body text, keep line-height at least 1.4–1.6× the font size when using exactly. At 14px font size, that means a minimum of 20px–22px.

"exactly" Set in CSS But Overridden Inline

What happens: You set mso-line-height-rule: exactly in a <style> block, but Outlook's inline style specificity rules override it unexpectedly.

<!-- ❌ Risky for body text — descenders may clip at tight line heights -->
<p style="font-size: 14px; line-height: 16px; mso-line-height-rule: exactly;">
  Typography is the art of arranging type...
</p>

<!-- ✅ Safer — give enough room for descenders -->
<p style="font-size: 14px; line-height: 22px; mso-line-height-rule: exactly;">
  Typography is the art of arranging type...
</p>

For critical layout elements — spacers, buttons, headers — always apply mso-line-height-rule: exactly inline, not just in the stylesheet.

Using It on Images

What happens: mso-line-height-rule: exactly on a cell containing an image can clip the image itself if the line-height is smaller than the image height.

<!-- ❌ Will clip a 60px image if line-height is set below 60px -->
<td style="line-height: 40px; mso-line-height-rule: exactly;">
  <img src="logo.png" height="60" />
</td>

<!-- ✅ Don't use exactly on image-only cells — let height do the work -->
<td style="height: 60px;">
  <img src="logo.png" height="60" style="display: block;" />
</td>

Only use mso-line-height-rule: exactly on cells or elements that contain text. For image cells, control height via the height attribute on <td> and display: block on the image.

Forgetting mso-line-height-alt on Spacers

What happens: Your spacer div works in browsers but collapses in Outlook because Outlook needs its own property.

<!-- ❌ Incomplete — works in browsers, collapses in some Outlook versions -->
<div style="line-height: 40px; font-size: 1px; display: block;">&nbsp;&nbsp;</div>

<!-- ✅ Complete — both properties set -->
<div style="
  mso-line-height-rule: exactly;
  mso-line-height-alt: 40px;
  line-height: 40px;
  font-size: 1px;
  display: block;
">&nbsp;&nbsp;</div>

mso-line-height-alt is the Outlook-specific companion to line-height for block-level elements. Think of it as the spacer-specific version of the same concept.

The Complete Spacer Pattern

This is the pattern for most reliable spacer in HTML email:

<div style="
  mso-line-height-rule: exactly;
  mso-line-height-alt: 40px;
  line-height: 40px;
  font-size: 1px;
  display: block;
">&nbsp;&nbsp;</div>

Breaking it down:

Quick Reference

Final Words

The HTML code example used in this article to demonstrate mso-line-height-rule: exactly is taken from one of the HTML email templates available in Tabular’s template gallery. Tabular is a drag and drop email template builder with a Figma like interface and an easy to use editor designed for creating responsive HTML emails.

Think of Outlook's default line-height behavior like a rubber band — it stretches to fit whatever is tallest on the line. mso-line-height-rule: exactly replaces that rubber band with a rigid ruler. Your value becomes law.

The tradeoff is that a rigid ruler has no give — so if your content is taller than the ruler (descenders, large glyphs, images), things get clipped. The property gives you control, but it also transfers the responsibility of getting the value right entirely to you.

That's why the best it's best to set it everywhere, but always with line-height values that are tested and generous enough to never clip.