CSS: “padding”: “none” is not a “padding” value.

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;
}

Learn more:

MDN Reference

MDN: CSS padding

→

W3C Reference

W3C: the CSS box model

→