CSS offset-distance

The offset-distance property in CSS is used to specify the distance by which an absolutely positioned element is offset from its original position. This property is often used in conjunction with the offset-path and offset-anchor properties to create interesting and dynamic layouts.

The syntax for the offset-distance property is as follows:


.element {
  offset-distance: distance;
}

Where distance can be specified in pixels, percentages, or other length units.

Let's take a look at an example to better understand how the offset-distance property works:

Result:

Offset Element

In the example above, we have a div element with a background color of lightblue. Inside this element, we have another div with the class element. This inner div is absolutely positioned and has an offset-distance of 50%, which means it is offset 50% along the path specified in the offset-path property.

By adjusting the value of the offset-distance property, you can control how far the element is offset from its original position, allowing you to create visually engaging layouts.