CSS padding-block

The padding-block property in CSS is used to set the padding of an element in the block direction. This property is particularly useful when you want to add space inside an element in the block axis (top and bottom).

The syntax for the padding-block property is:


selector {
  padding-block: value;
}

Where selector is the element you want to apply the padding to, and value can be specified in various units such as pixels, em, rem, etc.

Result:

This is an example of padding-block in action.

In the example above, we have applied a padding-block of 20px to a <div> element, which adds 20 pixels of space inside the element in the block direction.

You can also specify different values for the top and bottom padding using the padding-block-start and padding-block-end properties respectively.

Here is an example:


selector {
  padding-block-start: value;
  padding-block-end: value;
}

Result:

This is an example with different top and bottom padding values.

In the example above, we have set the top padding to 10px and the bottom padding to 20px for the same <div> element.

Overall, the padding-block property is a useful tool for adding space inside elements in the block axis.