CSS: “padding-right”: X negative values are not allowed.

The padding-right property defines the space between an element’s content and its right border. According to the CSS Box Model specification, padding represents internal space within an element, and conceptually, negative internal space doesn’t make sense — you can’t have less than zero space between content and its border. This rule applies equally to all padding properties: padding-top, padding-right, padding-bottom, padding-left, and the padding shorthand.

Browsers will typically ignore or discard a negative padding value, meaning your intended layout adjustment won’t take effect. Beyond simply being invalid CSS, this can lead to inconsistent rendering across browsers and unexpected layout behavior. Relying on invalid values makes your stylesheets fragile and harder to maintain.

If your goal is to pull an element closer to its neighbor or create an overlapping effect, margin-right is the appropriate property to use. Unlike padding, margins are explicitly allowed to have negative values. Negative margins reduce the space between elements or even cause them to overlap, which is often the actual intent behind a negative padding attempt.

How to Fix

1. Set the value to 0 or a positive number. If you simply want no padding, use 0. If you need some spacing, use a positive value.
2. Use margin-right for negative spacing. If you need to reduce external space or create overlap, switch to a negative margin instead.
3. Re-evaluate your layout approach. In some cases, using transform: translateX(), Flexbox gap, or Grid layout may achieve the desired result more cleanly than negative values on any property.

Examples

Incorrect: negative padding value

<style>
  .sidebar {
    padding-right: -10px;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

This triggers the validator error because -10px is not a valid value for padding-right.

Fixed: using zero or a positive value

<style>
  .sidebar {
    padding-right: 0;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Fixed: using a negative margin instead

If the intent was to reduce external spacing on the right side, use margin-right:

<style>
  .sidebar {
    padding-right: 0;
    margin-right: -10px;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Fixed: using transform for visual offset

If the goal is to visually shift the element without affecting document flow, transform is another option:

<style>
  .sidebar {
    padding-right: 0;
    transform: translateX(10px);
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Quick reference: padding vs. margin

Choose the property that matches your layout intent, and remember that all four padding directions — padding-top, padding-right, padding-bottom, and padding-left — follow the same non-negative rule.

Saiba mais:

MDN Reference

MDN Web Docs: padding

→

W3C Reference

W3C CSS 2.2 Specification: padding properties

→

web.dev Article

Web.dev: Learn CSS - The Box Model: padding

→