CSS em units: Syntax, Usage, and Examples

The em unit is a CSS length unit that scales relative to an element’s font size. Use it to build components that scale together, so text, padding, and spacing grow or shrink as one.

How to Use the em unit

em is a relative unit. For most properties, 1em equals the computed font-size of the element the property is applied to. If an element’s font size is 20px, then 1em is 20px, 2em is 40px, and 0.5em is 10px.

Here is a simple example:

.card {
font-size:20px;
padding:1em;/* 20px */
border-radius:0.5em;/* 10px */
}

.cardp {
margin-top:0.75em;/* 15px */
}

Everything scales from the font-size set on .card.

The special case: em for font-size can compound

When you use em to set font-size, the reference point becomes the parent’s font size. That means nested elements can “multiply” sizes if you are not careful.

.article {
font-size:16px;
}

.article.callout {
font-size:1.25em;/* 20px, relative to 16px */
}

.article.calloutstrong {
font-size:1.2em;/* 24px, relative to 20px */
}

That compounding behavior is sometimes helpful. It can also surprise you when deep nesting makes text way bigger than expected.

em in layout and spacing

You can use em for margins, padding, gaps, and even widths. The main idea stays the same. Values scale with the element’s font size.

.button {
font-size:1rem;/* base size */
padding:0.6em1em;/* relative to button text size */
border-radius:0.6em;
}

If you change the button’s font size, the padding follows automatically.

When to Use the em unit

The em unit is handy when you want a component to scale based on its own text size or on the text size it inherits from its parent.

1) Building components that scale as a package

Buttons, badges, tags, and alerts often look best when padding and border radius scale with the text. Em is perfect for that.

2) Creating nested typographic hierarchy

Sometimes you want a section to scale everything inside it. Setting font-size on a wrapper and using em for inner headings and spacing creates a consistent hierarchy.

3) Making UI elements adapt to different contexts

A button inside a hero section might use larger text than a button inside a sidebar. With em-based padding, both buttons keep the same “shape” relative to their text.

4) Tying spacing to readability

Long-form content benefits from spacing that relates to font size. When users bump text size up, em-based margins and line spacing can keep the layout comfortable.

5) Styling icons and small UI pieces next to text

Icons next to text often need to scale with the text. Em makes that easy, especially for inline SVG icons.

Examples of the em unit

1) Buttons with padding that follows the text size

This keeps buttons balanced across different sizes.

<buttonclass="btn btn-sm">Save</button>
<buttonclass="btn btn-md">Send message</button>
<buttonclass="btn btn-lg">Start free trial</button>

.btn {
font-weight:600;
padding:0.65em1.1em;
border-radius:0.6em;
border:1px solid#ccc;
background: white;
}

.btn-sm {font-size:0.875rem; }
.btn-md {font-size:1rem; }
.btn-lg {font-size:1.25rem; }

Same padding values, different font sizes, and the buttons still feel consistent.

2) A callout box that scales with its own font size

This example sets the font size on the callout and uses em for spacing. The whole component responds as one unit.

<asideclass="callout"aria-label="Tip">
<h2class="callout-title">Tip</h2>
<p>Use relative units for spacing, so the layout adapts when text size changes.</p>
</aside>

.callout {
font-size:1.125rem;
padding:1.2em;
border-radius:0.8em;
border:1px solid#ddd;
}

.callout-title {
font-size:1.2em;
margin:000.6em0;
}

The title size scales from the callout’s font size, and the spacing does too.

3) Nested text scaling that shows compounding

This is a realistic example of how “font-size in em” can stack up.

<divclass="panel">
<p>Normal text</p>
<divclass="panel-inner">
<p>Inner text</p>
<divclass="panel-deep">
<p>Deep text</p>
</div>
</div>
</div>

.panel {
font-size:16px;
}

.panel-inner {
font-size:1.1em;/* 17.6px */
}

.panel-deep {
font-size:1.1em;/* 19.36px, because parent is 17.6px */
}

This can be useful for “levels” in a UI, like nested comments. It can also get messy fast. Many teams avoid using em for font-size deep in a component tree unless they truly want this effect.

4) Form inputs with em-based padding

Forms often look awkward when text size changes and padding does not. Em-based padding helps.

<labelclass="field">
<spanclass="label">Email</span>
<inputclass="input"type="email"placeholder="name@example.com" />
</label>

.field {
display: grid;
gap:0.4em;
font-size:1rem;
}

.label {
font-size:0.95em;
}

.input {
font-size:1em;
padding:0.7em0.9em;
border-radius:0.6em;
border:1px solid#ccc;
}

If the field’s font size changes in a different layout, the input padding stays proportional.

5) Inline SVG icons that match text size

Using em for icon size keeps icons aligned with text without manual pixel tweaks.

<pclass="status">
<svgclass="icon"viewBox="0 0 16 16"aria-hidden="true">
<circlecx="8"cy="8"r="6"></circle>
</svg>
  Saved successfully
</p>

.status {
font-size:1rem;
display: flex;
align-items: center;
gap:0.5em;
}

.icon {
width:1em;
height:1em;
}

Change the font size of .status and the icon scales with it.

Learn More About the em unit

em vs rem

Both em and rem are relative units, but they use different reference points.

• em is relative to the element’s font size, or the parent’s font size when used on font-size
• rem is relative to the root font size (html)

A practical way to choose:

• Pick rem when you want a site-wide consistent scale.
• Pick em when you want a component to scale based on its local text size.

Many design systems mix them on purpose. Text sizes might use rem for consistency, while component padding uses em so it matches the component’s own font size.

Common “gotchas” with em

A few pitfalls show up often:

• Unexpected compounding: nested elements get bigger or smaller than you planned when multiple font sizes use em.
• Hard to debug deep components: a spacing value like 1.2em can mean different pixel sizes in different places.
• Fixed heights fight scaling: using em-based font sizes with fixed heights can cause overflow when text grows. Prefer min-height or flexible layouts.

Strategies that keep em manageable

You can use em without chaos. These patterns help:

• Use em for padding, gap, and border radius inside components.
• Use rem or px for font sizes if you want predictable typography across the app.
• Limit nesting where font-size uses em, unless you want compounding as a feature.

em in line-height and readability

line-height works nicely with relative values because it scales with text. Many developers use a unitless line-height, which also scales without compounding surprises.

body {
font-size:1rem;
line-height:1.6;
}

Unitless line-height is often easier than 1.6em, because it avoids some inheritance quirks.

Summary

The em unit scales lengths relative to an element’s font size, which makes it great for components that should scale as one. Use em for padding, spacing, and icon sizing when you want those measurements tied to local text. Keep an eye on font-size in em, since nested elements can compound and drift away from the size you expected.