CSS Default Values
Every CSS property has an initial value the spec assigns when nothing else is set. Knowing the most common ones saves debugging time.
Layout
| Property | Initial value |
|---|---|
display | Depends on element — block for div, inline for span. |
position | static |
box-sizing | content-box (almost everyone overrides to border-box). |
width / height | auto |
margin / padding | 0 (but elements have user-agent defaults). |
overflow | visible |
z-index | auto |
Visual
| Property | Initial value |
|---|---|
color | canvastext (system black). |
background | transparent / none |
border | medium none currentColor — no border because style is none. |
border-radius | 0 |
opacity | 1 |
visibility | visible |
Type
| Property | Initial value |
|---|---|
font-size | medium — typically 16px. |
line-height | normal — ~1.2 of font-size. |
font-family | User-agent default. |
text-align | start |
white-space | normal |
Tip: "Reset" stylesheets (Eric Meyer's, Normalize, modern-normalize) exist specifically because user-agent defaults differ between browsers. Apply one early.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Default Values</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
The default value of `position` is…
Answer:
Single word — "not moving".
Discussion
Loading…