📪Placement
The following utility classes provide options for positioning elements using top, left, right, bottom and inset properties:
.t-{value}
.t-{value}Sets the top property to a specific pixel value.
CSS equivalent: top: {value}px;
Example usage:
<div class="t-10">
<!-- Content positioned 10 pixels from the top -->
</div>.t-{value}p
.t-{value}pSets the top property to a specific percentage value.
CSS equivalent: top: {value}%;
Example usage:
<div class="t-50p">
<!-- Content positioned 50% from the top -->
</div>.l-{value}
.l-{value}Sets the left property to a specific pixel value.
CSS equivalent: left: {value}px;
Example usage:
<div class="l-20">
<!-- Content positioned 20 pixels from the left -->
</div>.l-{value}p
.l-{value}pSets the left property to a specific percentage value.
CSS equivalent: left: {value}%;
Example usage:
<div class="l-30p">
<!-- Content positioned 30% from the left -->
</div>.r-{value}
.r-{value}Sets the right property to a specific pixel value.
CSS equivalent: right: {value}px;
Example usage:
<div class="r-40">
<!-- Content positioned 40 pixels from the right -->
</div>.r-{value}p
.r-{value}pSets the right property to a specific percentage value.
CSS equivalent: right: {value}%;
Example usage:
<div class="r-50p">
<!-- Content positioned 50% from the right -->
</div>.b-{value}
.b-{value}Sets the bottom property to a specific pixel value.
CSS equivalent: bottom: {value}px;
Example usage:
<div class="b-60">
<!-- Content positioned 60 pixels from the bottom -->
</div>.b-{value}p
.b-{value}pSets the bottom property to a specific percentage value.
CSS equivalent: bottom: {value}%;
Example usage:
<div class="b-70p">
<!-- Content positioned 70% from the bottom -->
</div>These utility classes allow you to easily position elements by specifying the top, left, right, and bottom values, either in pixels or as a percentage.
.inset-{value}
.inset-{value}Sets the inset property to a specific pixel value for all sides of the element.
CSS equivalent: inset: {value}px;
Example usage:
<div class="inset-10">
<!-- Content with inset of 10 pixels on all sides -->
</div>.inset-block-{value}
.inset-block-{value}Sets the inset-block property to a specific pixel value for the block direction (vertical) of the element.
CSS equivalent: inset-block: {value}px;
Example usage:
<div class="inset-block-20">
<!-- Content with inset-block of 20 pixels in the block direction -->
</div>.inset-block-{value1}-{value2}
.inset-block-{value1}-{value2}Sets the inset-block property to specific pixel values for the block direction (vertical) of the element for both the block-start and block-end sides.
CSS equivalent: inset-block: {value1}px {value2}px;
Example usage:
<div class="inset-block-10-20">
<!-- Content with inset-block of 10 pixels on the block-start side and 20 pixels on the block-end side -->
</div>.inset-block-end-{value}
.inset-block-end-{value}Sets the inset-block-end property to a specific pixel value for the block-end side of the element.
CSS equivalent: inset-block-end: {value}px;
Example usage:
<div class="inset-block-end-15">
<!-- Content with inset-block-end of 15 pixels on the block-end side -->
</div>.inset-block-start-{value}
.inset-block-start-{value}Sets the inset-block-start property to a specific pixel value for the block-start side of the element.
CSS equivalent: inset-block-start: {value}px;
Example usage:
<div class="inset-block-start-25">
<!-- Content with inset-block-start of 25 pixels on the block-start side -->
</div>.inset-inline-{value}
.inset-inline-{value}Sets the inset-inline property to a specific pixel value for the inline direction (horizontal) of the element.
CSS equivalent: inset-inline: {value}px;
Example usage:
<div class="inset-inline-30">
<!-- Content with inset-inline of 30 pixels in the inline direction -->
</div>.inset-inline-{value1}-{value2}
.inset-inline-{value1}-{value2}Sets the inset-inline property to specific pixel values for the inline direction (horizontal) of the element for both the inline-start and inline-end sides.
CSS equivalent: inset-inline: {value1}px {value2}px;
Example usage:
<div class="inset-inline-10-20">
<!-- Content with inset-inline of 10 pixels on the inline-start side and 20 pixels on the inline-end side -->
</div>.inset-inline-end-{value}
.inset-inline-end-{value}Sets the inset-inline-end property to a specific pixel value for the inline-end side of the element.
CSS equivalent: inset-inline-end: {value}px;
Example usage:
<div class="inset-inline-end-15">
<!-- Content with inset-inline-end of 15 pixels on the inline-end side -->
</div>.inset-inline-start-{value}
.inset-inline-start-{value}Sets the inset-inline-start property to a specific pixel value for the inline-start side of the element.
CSS equivalent: inset-inline-start: {value}px;
Example usage:
<div class="inset-inline-start-25">
<!-- Content with inset-inline-start of 25 pixels on the inline-start side -->
</div>These utility classes allow you to control the inset positioning of elements in various directions, providing flexibility in managing their layout and spacing.
Last updated