# CSS: “padding-block”: “auto” is not a “padding-block” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-block-auto-is-not-a-padding-block-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `padding-block` shorthand property sets padding on the block-start and block-end sides of an element. In horizontal writing modes (like English), this corresponds to the top and bottom padding; in vertical writing modes, it maps to left and right. It's the logical equivalent of combining `padding-block-start` and `padding-block-end`.

The reason `auto` is invalid here is that padding, by definition in the CSS specification, must resolve to a definite size. Margins can be `auto` because the browser uses that value in layout algorithms to distribute remaining space (e.g., centering a block element with `margin-inline: auto`). Padding, however, adds space *inside* an element's border and has no such auto-distribution behavior defined in the spec. Attempting to use `auto` will cause the declaration to be ignored by browsers, meaning no padding is applied, which can lead to unexpected layout results.

This validation error often arises when developers confuse `padding-block` with `margin-block`, or when they copy centering patterns that work with margins and try to apply them to padding. If your intent was to center content, consider using `margin-block: auto` instead, or use Flexbox/Grid alignment properties.

## How to Fix

Replace `auto` with a valid value:

- **Length values**: `0`, `10px`, `1em`, `1.5rem`, etc.
- **Percentage values**: `5%`, `2% 1%`, etc. (relative to the inline size of the containing block).
- **Two values**: `padding-block: 20px 10px;` sets `padding-block-start` to `20px` and `padding-block-end` to `10px`.
- **CSS-wide keywords**: `inherit`, `initial`, `revert`, `revert-layer`, or `unset`.

If you used `auto` to try to eliminate padding, use `0` instead. If you used it to try to center something, switch to margins or a layout method like Flexbox.

## Examples

### Incorrect: using `auto` as a padding-block value

```html
<style>
  .box {
    padding-block: auto;
  }
</style>
<div class="box">This box has invalid padding.</div>
```

The browser will ignore the `padding-block: auto` declaration entirely, and the W3C validator will flag it as an error.

### Correct: using length values

```html
<style>
  .box {
    padding-block: 20px 10px;
  }
</style>
<div class="box">20px padding on block-start, 10px on block-end.</div>
```

### Correct: using a single value for equal padding

```html
<style>
  .box {
    padding-block: 1em;
  }
</style>
<div class="box">1em padding on both block-start and block-end.</div>
```

### Correct: removing padding with zero

```html
<style>
  .box {
    padding-block: 0;
  }
</style>
<div class="box">No block padding.</div>
```

### If you intended to center: use margin-block instead

```html
<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 300px;
  }
  .centered {
    margin-block: auto;
  }
</style>
<div class="container">
  <div class="centered">This element is vertically centered using margin-block: auto.</div>
</div>
```

The `margin-block: auto` approach works inside flex or grid containers to distribute space evenly, achieving vertical centering. This is likely what you want if you originally reached for `padding-block: auto`.