# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/layout/placement.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.