HTML Guides for padding-bottom

The padding-bottom property defines the amount of space between an element's content and its bottom border. Like all CSS length properties, it expects a length value — a number paired with a unit such as px, em, rem, %, vh, etc. The lone string px is just a unit identifier with no magnitude, so CSS parsers cannot interpret it as a meaningful measurement. This typically happens when a numeric value is accidentally deleted during editing, when a CSS preprocessor or template engine outputs an empty variable before the unit, or when code is manually written with a typo.

When the browser encounters an invalid value like padding-bottom: px, it discards the entire declaration and falls back to the default or inherited value. This can lead to unexpected layout shifts, where the spacing looks correct in one browser but breaks in another depending on how defaults are applied. Fixing these errors ensures consistent rendering across browsers and keeps your stylesheets standards-compliant.

How to fix it

1. Add a numeric value before the unit: change px to something like 10px, 1.5em, or 20%.
2. Use 0 without a unit if you want zero padding — writing padding-bottom: 0 is valid and preferred over 0px.
3. Check template variables — if you're using a preprocessor like Sass or a templating engine, make sure the variable that generates the number is not empty or undefined.
4. Remove the declaration entirely if padding-bottom is not needed, rather than leaving a broken value in place.

Examples

Incorrect: unit without a number

<div style="padding-bottom: px;">Content</div>

The value px alone is not valid because there is no number specifying the amount of padding.

Correct: numeric value with a unit

<div style="padding-bottom: 10px;">Content</div>

Correct: zero padding (no unit needed)

<div style="padding-bottom: 0;">Content</div>

Incorrect in an external stylesheet

.card {

padding-bottom: px;

}

Correct in an external stylesheet

.card {

padding-bottom: 16px;

}

Common preprocessor pitfall

In Sass or similar tools, this issue often arises from an empty or undefined variable:

$spacing: null;

.card {

padding-bottom: #{$spacing}px; // Outputs "padding-bottom: px;" if $spacing is empty

}

The fix is to ensure the variable holds a valid number, or provide a fallback:

$spacing: 16;

.card {

padding-bottom: #{$spacing}px; // Outputs "padding-bottom: 16px;"

}

Even better, include the unit in the variable itself to avoid concatenation issues:

$spacing: 16px;

.card {

padding-bottom: $spacing;

}

An invalid value was assigned to the padding-bottom CSS property inside a style attribute, and the W3C validator rejected it.

The padding-bottom property accepts a length (e.g., 10px, 2em), a percentage (e.g., 5%), or the keyword inherit. Values like auto, bare numbers without units, or unrecognized keywords are not valid. A common mistake is writing padding-bottom: 10 instead of padding-bottom: 10px, or using a value meant for a different property.

The validator specifically checks inline styles in style attributes against CSS grammar rules. Even if a browser silently ignores the bad value, the markup is still invalid.

Invalid example

<div style="padding-bottom: auto;">

Content here

</div>

The value auto is not valid for padding-bottom.

Valid example

<div style="padding-bottom: 10px;">

Content here

</div>

Use a supported value: a length with a unit (px, em, rem, %, etc.) or 0 (which does not require a unit).

A padding-bottom declaration has a negative value, and padding can't be less than zero.

Bottom padding is the space between the bottom of an element's content and its bottom border, so CSS only accepts zero or a positive length or percentage for it. A browser drops a padding-bottom declaration with a negative value, and the element keeps whatever bottom padding it gets from other rules. Adding !important doesn't change that: the declaration is still invalid, and the validator still reports it.

A negative bottom padding is usually an attempt to pull the next element up, or to make it overlap the bottom of this one. A negative margin-bottom does that, and CSS allows it. To fix the error, set padding-bottom to 0 or a positive length, and move the negative value to margin-bottom if you still need the overlap. The padding shorthand and the other side properties follow the same rule, and each one has its own message.

Invalid example

<div class="banner" style="padding-bottom: -20px;">

Banner content

</div>

<p>The next paragraph starts here.</p>

Valid example

<div class="banner" style="padding-bottom: 0; margin-bottom: -20px;">

Banner content

</div>

<p>The next paragraph starts here.</p>