CSS padding-block-start property

Description

It is a logical property that defines space at the start of content area inside a box. The selection of start side depends on the writing-mode.

It behaves like padding-top for the horizontal-tb writing mode.
It behaves like padding-right or padding-left for the vertical-rl and vertical-lr writing-mode respectively.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

padding-block-start : +ve length

0 lengthDefault 0: There is no space at the start of content inside a box.; padding-block-start: 0;
Try it
+ve length 20: +ve value represents space at the start of content inside a box.; padding-block-start: 20px;
Try it

It applies to all elements

Code

CSS

.element{
width:120px;
height:120px;
background-color:rgba(220,220,220,0.5);
float:left;
}

HTML

<div class="element">
   Check the behavior of padding-block-start for different values of writing mode.
 </div>