Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)
paperwork.help

padding-block : Padding Block Property

The padding-block property sets the padding at the start and end of the block direction, which is the top and the bottom of the element. It is a shorthand for padding-block-start (the top padding) and padding-block-end (the bottom padding).

On this page

Usage

padding-block: 12pt;         /* top and bottom */
padding-block: 4pt 16pt;     /* top, then bottom */
padding-block-start: 4pt;    /* top */
padding-block-end: 16pt;     /* bottom */

Values

  • One value sets both the top and the bottom padding.
  • Two values set the top padding and then the bottom padding.
  • Each value is a length or a percentage.

Examples

<div style="padding-block: 6pt 12pt; background-color: #EEE">Padded above and below</div>

Notes

  • It is the same as setting padding-top and padding-bottom, so a later padding-top overrides the start value.

  • For the left and right of an element, see padding-inline.

  • The values can be set from data, for example padding-block: {{model.value}}.
  • Added in Paperwork.Core 9.8.

See Also