Understanding the CSS Box Model, Cascade & Specificity

Understanding the CSS Box Model, Cascade & Specificity
A simple guide to understanding how CSS decides size, spacing, and which style wins when multiple rules target the same element.

1. The CSS Box Model In CSS, every HTML element can be understood as a rectangular box. The box model has four parts: content, padding, border, and margin.

Margin
Border
Padding
Content
Content: The actual text, image, button, or other material inside the element.
Padding: Space between the content and the border.
Border: The visible boundary around the element.
Margin: Space outside the border that separates the element from other elements.

1. Content-box vs Border-box content-box content-box is the default value of box-sizing. The declared width applies only to the content. Padding and border are added outside that width.

width: 300px;
padding: 20px;
border: 2px solid;
The total width becomes 300 + 20 + 20 + 2 + 2 = 344px.

border-box
With border-box, the declared width includes the content, padding, and border. This makes element sizes easier to predict.

box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid;
The entire box remains 300px wide. Padding and border fit inside that width, so the content area becomes smaller.

Common practice: Many developers use box-sizing: border-box for all elements because it makes widths and heights easier to control.

1. Margin Collapsing Vertical margins of two adjacent block elements can sometimes collapse into one margin instead of being added together.

Element A — margin-bottom: 30px
Element B — margin-top: 20px
In a normal block layout, these two vertical margins can collapse, so the visible gap can be 30px rather than 50px. Flexbox and Grid layouts do not use this same margin-collapsing behavior between their items.

1. The CSS Cascade The cascade is the process CSS uses to decide which declaration should be applied when more than one rule targets the same element.

Important factors include origin and importance, specificity, and source order. In simple terms, when rules are competing, the browser follows the cascade instead of randomly choosing a style.

p { color: blue; }
p { color: green; }
Both rules have the same specificity. Therefore, the later rule wins and the paragraph becomes green.

1. CSS Specificity Specificity is the scoring system browsers use when multiple selectors target the same element. A more specific selector normally wins over a less specific selector.

Inline styleVery high priority in normal author CSS

id1 ID

.class / [attribute] / :pseudo-class1 class-level unit
element / ::pseudo-element1 type-level unit
p { color: blue; }
.note { color: green; }

important { color: red; }

If the same paragraph matches all three selectors, the ID selector is more specific than the class selector, and the class selector is more specific than the element selector.

What about a tie?
If two competing selectors have the same specificity, the rule that appears later in the stylesheet wins.

1. Inheritance Some CSS properties can pass their values from a parent element to its children. This is called inheritance.

This text inherits the color from its parent.

.parent { color: darkblue; }
Not every CSS property is inherited. For example, properties such as margin, padding, and border do not normally inherit.

1. CSS Global Keywords CSS provides keywords that control where a property's value comes from. These are useful when working with inheritance and the cascade.

inheritUse the value from the parent element.
initialUse the property's initial CSS value.
unsetInherit if the property normally inherits; otherwise use its initial value.
revertStep back to an earlier cascade origin/value.
revert-layerStep back from the current CSS cascade layer.
For box-sizing, the initial value is content-box.

1. Why Avoid !important Abuse? !important gives a declaration very high priority within the normal author cascade. It can be useful in special situations, but using it everywhere makes CSS difficult to override and maintain.

.button {
color: red !important;
}
A better approach is usually to understand why a rule is winning and fix the selector, cascade, or source order instead of adding !important repeatedly.

1. CSS Custom Properties (Variables) CSS custom properties let us store reusable values. They are commonly called CSS variables.

:root {
--main-color: #173b6c;
--spacing: 16px;
}

.card {
color: var(--main-color);
padding: var(--spacing);
}
If the value needs to change later, we can change the variable instead of editing the same value in many places.

1. Practical Takeaways Think of every HTML element as a box with content, padding, border, and margin. Remember that content-box makes width apply to content. Remember that border-box makes width include padding and border. Use DevTools to inspect the actual box model and see which CSS rules are active. When styles conflict, understand the cascade and specificity before reaching for !important. Keep selectors simple and predictable so CSS remains easy to maintain. CSS Foundations • Box Model • Cascade • Specificity