📪Placement

Placement

Position Utility Classes

The following utility classes provide options for positioning elements using top, left, right, bottom and inset properties:

.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 Sets 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} 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 Sets 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} 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 Sets 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} 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 Sets 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} 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} 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} 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} 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} 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} 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} 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} 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} 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.

PreviousOverflowNextPosition

Last updated