HTML Guides for margin-bottom
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The W3C validator raises this error when it encounters a bare unit like px used as the value for margin-bottom without an accompanying number. In CSS, length values are always composed of two parts: a <number> and a <unit>. The token px alone is not a valid <length> value — it’s just a unit identifier with no magnitude. This typically happens due to a typo, an accidental deletion of the numeric portion, or a templating/build tool that outputs an empty variable before the unit.
This matters for several reasons. First, browsers will discard the invalid declaration entirely, meaning margin-bottom will fall back to its default or inherited value — likely not what you intended. This can cause unexpected layout shifts across different pages or components. Second, invalid CSS can make debugging harder, since the silent failure may not be obvious until the layout breaks in a specific context. Third, clean, valid CSS is easier to maintain and signals code quality to collaborators.
How to fix it
- Add a numeric value before the unit: change px to something like 10px, 1.5em, or 20%.
- Use 0 without a unit if you want zero margin: margin-bottom: 0 is valid and preferred over margin-bottom: 0px.
- Use a keyword value if appropriate: margin-bottom also accepts auto, inherit, initial, revert, and unset.
- Check template variables: if you’re using a preprocessor like Sass or a JavaScript framework that injects values, make sure the variable isn’t empty or undefined before concatenation with the unit.
Examples
Incorrect: bare unit with no number
<div style="margin-bottom: px;">Content</div>The value px is not a valid margin-bottom value. The browser will ignore this declaration.
Correct: numeric value with unit
<div style="margin-bottom: 10px;">Content</div>Correct: zero margin (no unit needed)
<div style="margin-bottom: 0;">Content</div>Correct: using a keyword value
<div style="margin-bottom: auto;">Content</div>Incorrect in a stylesheet
<html lang="en">
<head>
<title>Example</title>
<style>
.card {
margin-bottom: px;
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>Fixed stylesheet
<html lang="en">
<head>
<title>Example</title>
<style>
.card {
margin-bottom: 16px;
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>Watch out for preprocessor issues
If you use a CSS preprocessor like Sass or Less, a common source of this error is an empty or undefined variable:
/* If $spacing resolves to empty, this produces "margin-bottom: px;" */
.card {
margin-bottom: $spacing + px;
}Instead, ensure the variable includes the unit or has a valid fallback:
$spacing: 16px;
.card {
margin-bottom: $spacing;
}The same principle applies to any CSS property that expects a <length> value — always pair a number with its unit, or use 0 when no spacing is needed.
The spacing() function is not a valid CSS value. It does not exist in any CSS specification.
The spacing() notation is commonly found in utility-based frameworks like Tailwind CSS or custom design systems where it acts as a shorthand for spacing scales. However, browsers and the W3C validator do not recognize it as valid CSS.
If you’re using a build tool or preprocessor, make sure spacing() is being compiled into a valid CSS value before it reaches the browser. If you’re writing plain CSS, replace it with a standard CSS length value such as px, rem, em, or use a CSS custom property.
How to Fix
Replace spacing(3) with a valid CSS length value:
#content::after {
margin-bottom: 0.75rem;
}Or use a CSS custom property to create your own spacing scale:
:root {
--spacing-3: 0.75rem;
}
#content::after {
margin-bottom: var(--spacing-3);
}Both approaches produce valid CSS that the W3C validator will accept. If your project relies on a framework that provides spacing(), check that your build pipeline (e.g., PostCSS, Sass, or Tailwind) is correctly transforming it into standard CSS before deployment.
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries