> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/layout/placement.md).

# Placement

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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.