🎯 What are CSS Default Values?

Every CSS property has a default (initial) value that browsers apply when no explicit value is set. Understanding these defaults helps you write better CSS and avoid unexpected styling issues.


/* These elements have default values */
div {
    /* display: block; (default) */
    /* margin: 0; (default) */
    /* padding: 0; (default) */
}

Key Concept:

Browsers apply default styles through their "user agent stylesheet" before your CSS is loaded. Knowing these defaults helps you override them effectively.

Common Default Values

📦

Display

Most elements are block or inline

div: block
span: inline
img: inline-block

📏

Spacing

Margin and padding defaults

margin: 0
padding: 0
border: none

🎨

Colors

Text and background defaults

color: black
background: transparent

📝

Typography

Font and text defaults

font-size: medium
font-weight: normal

🔹 Display Property Defaults

Every HTML element has a default display value governing its layout behavior. Block elements (<div>, <p>) start on a new line and take full width. Inline elements (<span>, <a>) flow within text and ignore width/height. Exceptions include <li> (list-item) and <img> (inline-block). Understanding these defaults is foundational for CSS layout. When you apply Flexbox or Grid to a container, you're often overriding these intrinsic display values to create modern, responsive designs. Mastering defaults prevents unexpected spacing and alignment issues.

/* Block elements (default: display: block) */
div, p, h1-h6, section, article, header, footer, main, aside {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Inline elements (default: display: inline) */
span, a, strong, em, code, small {
    display: inline;
    width: auto;
    height: auto;
}

/* Inline-block elements */
img, input, button {
    display: inline-block;
}

Visual Example:

Block Element (div)

Inline Elements

Inline-block

🔹 Typography Defaults

Browsers apply default typographic styles to ensure basic readability before any custom CSS. The root font size is typically 16px. Headings (<h1>-<h6>) have bold weight and descending sizes. Paragraphs have top/bottom margins (usually 1em). The default font family is set by the user's browser/OS. These defaults vary between browsers (e.g., Chrome vs. Firefox), which is why CSS resets or normalizers are used to create a consistent cross-browser baseline. Knowing defaults helps you write more efficient CSS by only overriding what's necessary.

/* Typography defaults */
body {
    font-family: serif; /* Browser default */
    font-size: 16px; /* Usually 16px */
    font-weight: 400; /* normal */
    line-height: normal; /* ~1.2 */
    color: black;
    text-align: left; /* or start */
}

/* Heading defaults */
h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; }

/* Paragraph defaults */
p { margin: 1em 0; }

Default Typography:

Heading 1 (2em)

Heading 2 (1.5em)

Paragraph with default margins

🔹 Box Model Defaults

The default CSS box model (content-box) applies width and height only to the content area. Padding and border are added outside, increasing the element's total size. Most elements have default margins (e.g., <body> has 8px) and some have padding (e.g., <ul>). This model can cause layout miscalculations. The modern solution is to set box-sizing: border-box globally, which includes padding and border within the specified width/height, leading to more intuitive sizing and simpler responsive math. This is often the first rule in a CSS reset.

/* Box model defaults */
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: content-box; /* default */
}

/* List defaults */
ul, ol {
    margin: 1em 0;
    padding-left: 40px; /* for bullets/numbers */
}

/* Form element defaults */
input, textarea, select {
    margin: 0;
    padding: 2px;
    border: 2px inset;
    font: inherit;
}

/* Table defaults */
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Box Model Visualization:

Content Area

margin: 0 (default)
padding: 0 (default)
border: none (default)

🔹 CSS Reset vs Normalize

CSS Reset (like Eric Meyer's) removes nearly all browser defaults, providing a blank slate for total design control. You must style everything from scratch. Normalize.css preserves useful defaults while fixing inconsistencies across browsers, promoting accessibility and a consistent baseline. The choice depends on needs: a reset is for highly custom, unique designs where you want no assumptions; Normalize is for projects where you want sensible, consistent starting points with less initial styling work. Many developers now use a modern, minimal reset focusing on box-sizing: border-box and removing margin/padding from key elements.

/* CSS Reset - Removes all defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Normalize.css approach - Standardizes defaults */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    line-height: 1.6;
    font-family: system-ui, sans-serif;
}

Reset Comparison:

CSS Reset: Removes all browser defaults - you style everything from scratch

Normalize: Keeps useful defaults, fixes inconsistencies between browsers

Modern Reset: Minimal reset focusing on box-sizing and basic improvements

🔹 Using initial and inherit Keywords

CSS keywords initial, inherit, unset, and revert provide fine-grained control over the cascade. initial sets a property to its CSS-spec default. inherit forces the element to take the parent's computed value. unset acts as inherit for inherited properties (like color) and initial for non-inherited ones (like border). revert rolls back to the browser's default style. These are powerful for component styling, overriding frameworks in specific contexts, and creating predictable, maintainable style systems by explicitly managing inheritance.

/* CSS value keywords */
.reset-to-default {
    color: initial; /* Browser's default value */
    font-size: initial;
    margin: initial;
}

.inherit-from-parent {
    color: inherit; /* Takes parent's value */
    font-size: inherit;
}

.unset-property {
    color: unset; /* initial for non-inherited, inherit for inherited */
}

.revert-property {
    color: revert; /* Reverts to user agent stylesheet */
}

/* Practical example */
.custom-button {
    /* Override defaults */
    background: #007acc;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    
    /* Reset to defaults when needed */
    font-size: initial; /* Back to browser default */
    font-family: inherit; /* Use parent's font */
}

Keyword Effects:

initial: Resets to CSS specification default

inherit: Takes the parent element's computed value

unset: Acts like inherit for inherited properties, initial for others

revert: Reverts to browser's default stylesheet

CSS Default Values