HTML Guides for negative

A border-top-width declaration has a negative value, and a border can't be thinner than zero.

border-top-width sets the thickness of an element's top border. It accepts 0, a positive length such as 2px or 0.1em, or one of the keywords thin, medium and thick. A browser drops a border-top-width declaration with a negative value, and the element keeps whatever top border width it gets from other rules. Adding !important doesn't change that: the declaration is still invalid, and the validator still reports it.

To remove the top border, set border-top-width to 0. If the negative width was meant to pull the element up over the content above it, use a negative margin-top, which CSS allows. The border-top and border-width shorthands follow the same rule, and each one has its own message.

Invalid example

<p>The previous paragraph ends here.</p>

<div class="banner" style="border-top-width: -20px;">

Banner content

</div>

Valid example

<p>The previous paragraph ends here.</p>

<div class="banner" style="border-top-width: 0; margin-top: -20px;">

Banner content

</div>

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>

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>

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>