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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-bottom-x-negative-values-are-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<div class="banner" style="padding-bottom: -20px;">
  Banner content
</div>
<p>The next paragraph starts here.</p>
```

## Valid example

```html
<div class="banner" style="padding-bottom: 0; margin-bottom: -20px;">
  Banner content
</div>
<p>The next paragraph starts here.</p>
```