HTML Guides for padding-block

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

<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

<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

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

Correct: removing padding with zero

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

If you intended to center: use margin-block instead

<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.