CSS padding-inline-end property

Description

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

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

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

padding-inline-end : length

0 lengthDefault 0: There is no thickness of the padding area at the end side of the border box.; padding-inline-end: 0;
Try it
+ve length 20: +ve value represents padding area at the end side of a block.; padding-inline-end: 20px;
Try it
-ve length -20: The space decreases by 20px at the end of inline i.e the the subsequent content may merge into the element.; padding-inline-end: -20px;
Try it

It applies to all elements

Code

CSS

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

HTML

<div class="element">
   Check the behavior of padding-inline-end for different value of writing mode.
 </div>	
 content after the inline