HTML Guides for padding

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>

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

Left padding is the space between an element's left border and its content, so CSS only accepts zero or a positive length or percentage for it. A browser drops a padding-left declaration with a negative value, and the element keeps whatever left padding it gets from other rules. On a list, that means the default indentation stays where it was.

To fix the error, change the value to 0 or a positive length. Setting padding-left: 0 removes the indentation a list gets by default. If the content has to move past the left edge of its container, use a negative margin-left, which CSS allows. The padding shorthand and the other side properties follow the same rule, and each one has its own message.

Invalid example

<ul class="links" style="padding-left: -20px;">

<li>First link</li>

<li>Second link</li>

</ul>

Valid example

<ul class="links" style="padding-left: 0;">

<li>First link</li>

<li>Second link</li>

</ul>

The padding shorthand property sets the padding area on all four sides of an element. It accepts one to four values, each of which must be a <length> (e.g., 10px, 1em), a <percentage>, or 0. Unlike some other CSS properties such as border, outline, or max-width, the padding property has no none keyword in its value syntax.

This is a common mistake because several CSS properties do accept none — for example, border: none, text-decoration: none, and display: none. It's natural to assume padding: none would work the same way, but the CSS specification simply doesn't define it for padding. When a browser encounters an invalid value, it ignores the declaration entirely, which means your intended styling won't be applied and the element may retain its default or inherited padding. This can lead to unexpected layout issues that are difficult to debug.

The same rule applies to the margin property — margin: none is also invalid. Use margin: 0 instead.

How to Fix It

Replace none with 0. You don't need to include a unit when the value is zero, so padding: 0 is perfectly valid and is the idiomatic way to express "no padding." You can also use 0 for individual padding properties like padding-top, padding-right, padding-bottom, and padding-left.

If you only want to remove padding on specific sides, target those sides individually rather than using the shorthand.

Examples

❌ Incorrect: Using none with padding

.card {

padding: none;

}

The validator will report: CSS: "padding": "none" is not a "padding" value. The browser will ignore this declaration.

✅ Correct: Using 0 to remove padding

.card {

padding: 0;

}

✅ Correct: Removing padding on specific sides

.card {

padding-top: 0;

padding-bottom: 0;

}

❌ Incorrect: Using none in inline styles

<div style="padding: none;">Content</div>

✅ Correct: Using 0 in inline styles

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

✅ Correct: Using valid padding values

/* Single value — applies to all four sides */

.card {

padding: 16px;

}

/* Two values — vertical | horizontal */

.card {

padding: 10px 20px;

}

/* Four values — top | right | bottom | left */

.card {

padding: 10px 20px 15px 5px;

}

/* Zero on top/bottom, 1em on left/right */

.card {

padding: 0 1em;

}

The padding property accepts one or more length values, percentages, or the keyword 0. A valid length value always consists of a number immediately followed by a unit identifier, such as 10px, 1.5em, or 2rem. Writing just px without a preceding number is meaningless to the CSS parser — it's like saying "pixels" without specifying how many. The browser will discard the invalid declaration entirely, which means the element will fall back to its default or inherited padding, potentially breaking your layout in unexpected ways.

This error commonly occurs due to:

• Typos or accidental deletion — the numeric part of the value was inadvertently removed during editing.
• Templating or build tool issues — a dynamic value (e.g., from a variable or CMS field) resolved to an empty string, leaving only the px suffix behind.
• Copy-paste mistakes — copying a snippet and forgetting to update the placeholder value.

Because the W3C validator flags this in inline style attributes, it means invalid CSS is embedded directly in your HTML. Fixing it improves standards compliance and ensures consistent rendering across browsers.

How to Fix

1. Add a numeric value before the unit: change px to something like 10px, 1em, or 5%.
2. Use 0 without a unit if you want zero padding — writing padding: 0; is valid and preferred over padding: 0px;.
3. Check dynamic values — if the number comes from a variable or template expression, make sure it outputs a valid number and isn't empty.

Examples

Incorrect: Unit Without a Number

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

The validator reports that px is not a valid padding value because no number precedes the unit.

Correct: Numeric Value With Unit

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

Correct: Zero Padding (No Unit Needed)

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

When the value is 0, no unit is required since zero pixels, zero ems, and zero percent are all identical.

Correct: Multiple Padding Values

<div style="padding: 8px 16px;">Content</div>

This sets 8px of vertical padding and 16px of horizontal padding — both are valid length values.

Incorrect in External CSS

The same problem can appear in a stylesheet linked from your HTML:

.card {

padding: px;

}

Fixed in External CSS

.card {

padding: 12px;

}

Watch for Template-Generated Values

If you use a templating system, double-check that the numeric portion actually renders. For example, a template like this could produce the error if spacing is empty:

<!-- If spacing is empty, this becomes "padding: px;" -->

<div style="padding: {{ spacing }}px;">Content</div>

Make sure the variable always resolves to a valid number, or provide a fallback value.

Unlike margin properties, which accept negative values to pull elements closer together or overlap them, all padding properties (padding-top, padding-right, padding-bottom, padding-left, and the padding shorthand) are defined in the CSS specification to only accept zero or positive lengths. This is because padding represents the space inside an element between its content and its border — a negative internal space is not a meaningful concept.

When you use a negative padding value, browsers will typically ignore the declaration entirely, meaning your layout may not look the way you intended. The W3C validator catches this to help you identify code that won't behave consistently across browsers and doesn't conform to the CSS specification.

If your goal is to reduce the space between elements, negative margin values are the correct tool. If you're trying to shift content upward within a container, consider using position: relative with a negative top offset, or adjust the layout with other techniques like transform: translateY().

Examples

❌ Invalid: negative padding value

<div style="padding-top: -20px;">

This element has invalid negative padding.

</div>

The validator will report: CSS: "padding-top": "-20" negative values are not allowed.

✅ Fixed: using zero or positive padding

<div style="padding-top: 0;">

This element has no top padding.

</div>

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

This element has valid positive top padding.

</div>

✅ Alternative: using negative margin instead

If you need to reduce the space above an element, use a negative margin-top:

<div style="margin-top: -20px;">

This element is pulled upward with a negative margin.

</div>

❌ Invalid: negative values in the padding shorthand

The same rule applies to the padding shorthand property. Any negative component value is invalid:

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

Invalid shorthand padding.

</div>

✅ Fixed: all-positive shorthand values

<div style="padding: 0 20px 15px 20px;">

Valid shorthand padding with zero top padding.

</div>

✅ Alternative: using transform for visual offset

If you need to visually shift an element's content upward without affecting layout flow, transform is a clean option:

<div style="transform: translateY(-20px);">

This element appears shifted upward.

</div>

The values of the padding property are separated by spaces, not commas: write padding: 10px 20px, not padding: 10px, 20px.

padding is a shorthand that takes one to four lengths or percentages. One value applies to all four sides. Two values set the top and bottom, then the left and right. Three set the top, then left and right, then the bottom. Four go clockwise from the top: top, right, bottom, left.

In CSS a comma separates the items of a list, such as the fonts in font-family or the layers in box-shadow. padding doesn't take a list, so the validator reports the comma as an incorrect operator. Browsers drop the whole declaration, and the element keeps whatever padding an earlier rule gave it, or none. The habit often comes from JavaScript, or from CSS functions like rgb(255, 0, 0) where commas separate the arguments.

Invalid example

<div style="padding: 10px, 20px;">

<p>Card content</p>

</div>

Valid example

<div style="padding: 10px 20px;">

<p>Card content</p>

</div>

A CSS padding property contains a value the validator does not recognize as valid for that property.

The padding shorthand and its longhand variants (padding-top, padding-right, padding-bottom, padding-left) accept only <length>, <percentage>, or the keyword auto (in some contexts). Common causes of this error include:

• Using an invalid unit or misspelling a unit, such as 10xp instead of 10px.
• Omitting the unit on a non-zero value, such as padding: 10 instead of padding: 10px.
• Passing a color, keyword, or other unrelated value, such as padding: red or padding: bold.
• Including extra or misplaced values from a copy-paste error, such as padding: 10px 20px 30px 40px 50px (five values instead of the maximum four).
• Using CSS custom properties or newer syntax in an inline style attribute that the validator's CSS parser does not yet support.

The padding shorthand accepts one to four values, corresponding to the top, right, bottom, and left sides. Each value must be a non-negative length (like 0, 8px, 1em, 2rem) or a percentage.

HTML examples

Invalid padding value

<div style="padding: 10xp;">Content</div>

Fixed padding value

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

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

Padding is the space between an element's content and its border, so CSS only accepts zero or a positive length or percentage for it. A browser drops any padding declaration with a negative value, and the element keeps whatever padding it gets from other rules.

The shorthand takes one to four values, and any of them can be the negative one. In padding: 16px -8px, the left and right padding are -8px, so the validator reports that value. When a declaration has more than one negative value, the message only quotes the first, so check every value in it. The padding-top, padding-right, padding-bottom and padding-left properties follow the same rule, and each one has its own message.

To fix the error, change each negative value to 0 or a positive length. If the negative value was meant to pull the element closer to its neighbors, or past the edges of its container, use a negative margin instead, which CSS allows.

Invalid example

<div class="card" style="padding: 16px -8px;">

Card content

</div>

Valid example

<div class="card" style="padding: 16px 0; margin: 0 -8px;">

Card content

</div>