CSS padding-inline property

Description

It is a logical property that defines space at the start and end sides of the content in the boundaries of a box. The selection of start side depends on the writing-mode.

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

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

padding-inline : padding-inline-start padding-inline-end

Property values

20px: Both the padding-inline-start and padding-inline-end are 20px.; padding-inline: 20px;
Try it
20px 40px: The padding-inline-start and padding-inline-end values are 20px and 40px respectively.; padding-inline: 20px 40px;
Try it

Applicable to

It applies to all elements

Preview

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-inline-start for different value of writing mode.
 </div>	
 content after the inline

CSS3 Properties

Description

Syntax

Property values

Applicable to