CSS · Layout and visual systems
How does inheritance work in CSS?
Short answer
Some properties inherit from parent to child by default, mainly text and font-related ones. Others such as margin, border and display do not. The inherit, initial, unset and revert keywords control this explicitly.
Inheritance passes a computed value down the tree for properties that are defined as inherited. It is not the same as the cascade. A child inherits a value only when no declaration matches that child for the property.
body {
color: #1f2937;
font-family: system-ui, sans-serif;
}
.card {
border: 1px solid #d1d5db;
}Common inherited and non-inherited properties
- Inherited: color, font-family, font-size, line-height, visibility, cursor, text-align
- Not inherited: margin, padding, border, background, width, height, display, position
- inherit explicitly takes the parent's computed value
- initial resets to the property's initial value, not the browser default for that element
- unset behaves as inherit for inherited properties and initial for the rest
revert rolls the property back to the value from a lower origin, such as the user-agent stylesheet. That is often closer to what people mean by resetting an element than initial is.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Which properties inherit by default?
- 2What is the difference between initial, unset and revert?
- 3Why does a child not inherit a parent's margin?
- 4Does inheritance trigger when a declaration matches the child?
Say it in the interview
Inheritance only applies to properties that are defined as inherited, mostly text and font properties. If a child has no matching declaration for color, it takes the parent's computed color. Margin, border, display and background do not inherit. I use inherit, initial, unset and revert deliberately, and I avoid inheriting box-model values because it usually surprises the layout.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.