CSS initial, inherit, and unset: How to Choose

The easiest way to understand initial, inherit, and unset is to ask one question first: does this CSS property normally inherit? Text-related properties often inherit. Layout, spacing, background, positioning, and transform usually do not.

unset depends on that inheritance behavior, which is why it feels confusing when learned only from definitions.

Quick comparison

initial does not mean "go back to the browser's visible default style." It means the property's initial value. inherit does not mean "normal inheritance"; it forces inheritance even for properties that normally do not inherit.

Properties that usually inherit

Text and presentation properties commonly inherit:

• color
• font-family
• font-size
• font-weight
• line-height
• text-align
• letter-spacing
• word-spacing
• visibility
• cursor

That is why this works naturally:

article {
  color: #d4d2cb;
  line-height: 1.8;
}

Most child text will follow those values without repeating them on every element.

Properties that usually do not inherit

Layout and box-model properties usually do not inherit:

• width
• height
• margin
• padding
• border
• display
• position
• top, right, bottom, left
• background
• overflow
• transform
• z-index

This is a good thing. If every child inherited display: flex, position: relative, or margin, layouts would become hard to control.

The difference with color

color is inherited:

.parent {
  color: royalblue;
}

.a {
  color: initial;
}

.b {
  color: inherit;
}

.c {
  color: unset;
}

Result:

• .a returns to the initial color value.
• .b uses the parent's royalblue.
• .c behaves like inherit, because color is normally inherited.

The difference with margin

margin-left is not normally inherited:

.parent {
  margin-left: 40px;
}

.a {
  margin-left: initial;
}

.b {
  margin-left: inherit;
}

.c {
  margin-left: unset;
}

Result:

• .a resets to the initial value.
• .b forcibly receives 40px from the parent.
• .c behaves like initial, because margin-left is not normally inherited.

This is the core mental model for unset.

When to use inherit

Use inherit when the child should intentionally match the parent:

.card {
  border-radius: 16px;
}

.card img {
  border-radius: inherit;
}

This avoids duplicating 16px and keeps future changes aligned.

Icons often use a related pattern:

.button {
  color: white;
}

.button svg {
  fill: currentColor;
}

currentColor lets the icon follow text color.

When to use initial

Use initial when you want to cut off an inherited or previously applied value:

.editor {
  text-align: center;
}

.editor code {
  text-align: initial;
}

Use it deliberately. The initial value may not match what you think of as "browser default styling."

When to use unset

unset works well in neutral reset code:

.button-reset {
  all: unset;
}

It saves you from manually deciding each property's inheritance behavior. The tradeoff is readability: readers still need to understand whether the property normally inherits.

Related FreeMac guides

• For rem and root font size, read What is rem in CSS? Why 1rem Often Equals 16px.
• For z-index issues, read Why z-index Fails: Understanding CSS Stacking Context.
• For animation performance, read Reflow and Repaint: Why CSS Animations Get Janky.