CSS padding-inline

The padding-inline property is used to set the padding on the inline sides of an element. This property is useful when you want to add space on the left and right sides of an inline element.

The syntax for the padding-inline property is:


selector {
  padding-inline: value;
}

Where selector is the element you want to style, and value is the amount of padding you want to add on the inline sides.

Let's see an example to better understand how padding-inline works:

Result:

This is a paragraph with padding on the left and right sides using padding-inline property.


p {
  padding-inline: 20px;
}

In this example, we are adding 20 pixels of padding on the left and right sides of the paragraph element.

You can also use different units for the padding-inline property, such as pixels, ems, rems, etc. This allows you to customize the amount of padding according to your design needs.

Remember that the padding-inline property only affects the inline sides of an element. If you want to add padding to all sides of an element, you can use the padding property instead.