CSS inset-block-end

The inset-block-end property in CSS sets the offset of the end side (bottom for ltr, top for rtl) of an element with respect to its containing block.

Unlike the regular margin property, which adds space outside of the element, the inset-block-end property adds spacing inside the element's border.

Here's an example to illustrate how inset-block-end works:

Result:

This is an example text with inset-block-end applied.

In the example above, the inner div element has an inset-block-end value of 30px, which creates spacing at the bottom of the element.

The syntax for using inset-block-end is:


selector {
  inset-block-end: value;
}

Where selector is the element you want to apply the property to, and value can be a length value (e.g., pixels, em) or a percentage.

Here's a table summarizing the possible values for inset-block-end:

Value	Description
auto	The browser calculates the inset block end.
length	Specifies a fixed inset block end in px, em, etc.
percentage	Specifies a percentage of the containing block's size.

Try experimenting with different values for inset-block-end to see how it affects the spacing inside the element!