CSS Inherit

The inherit keyword in CSS allows an element to explicitly inherit a property value from its parent. While some properties naturally inherit (like font-family), most others—like border, margin, or background—do not unless you manually set them to inherit.

This keyword is useful when you want child elements to follow the same styling without repeating the values.

Where Can You Use Inherit?

You can apply inherit to:

Typography (like font-size, color)
Spacing (like padding, margin)
Layout properties (like display, visibility)
Or even all properties at once using all: inherit

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Inherit Example – Learn With Arshyan</title>
  <style>
    .parent {
      color: darkblue;
      font-family: 'Segoe UI', sans-serif;
      border: 2px dashed darkblue;
      padding: 20px;
    }

    .child {
      color: inherit;
      font-family: inherit;
      border: inherit;
      padding: inherit;
    }
  </style>
</head>
<body>

  <div class="parent">
    <p>This is the parent element.</p>
    <div class="child">
      This child inherits styles from the parent.
    </div>
  </div>

</body>
</html>

The .child element inherits the text color, font, border style, and padding from .parent because we’ve used inherit on each property.
If we didn’t use inherit, most of those styles wouldn’t apply to the child by default.

Universal Inheritance

Instead of listing each property, you can use:

				
					.child {
  all: inherit;
}

This will force the child to inherit every possible style from its parent. Be careful—this can override specific defaults or reset important layout settings unintentionally.

Summary Table

Keyword	What it does
`inherit`	Forces a child to use parent’s value for that CSS property
`all: inherit`	Applies inheritance to all properties

Learn With Arshyan Tip:

Using inherit can help you keep your CSS clean and DRY (Don’t Repeat Yourself). It’s especially useful when you’re working with components that should match their parent design exactly.