# CSS: “inset-inline-start”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-inset-inline-start-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A math function in the `inset-inline-start` value, such as `calc()`, `min()`, `max()` or `clamp()`, combines values whose types can't be mixed, like a length and a unitless number.

`inset-inline-start` sets how far a positioned element sits from the start edge of its containing block in the inline direction. In left-to-right text that is the left edge, and in right-to-left text it is the right edge. The property takes a length such as `12px` or `1rem`, a percentage, or `auto`, so any math function inside it has to produce a length or a percentage too.

When `calc()` adds or subtracts, both sides must have the same type. `calc(1rem + 2px)` adds two lengths, but `calc(1rem + 2)` tries to add a plain number to a length, and the result has no type the browser can use. The arguments of `min()`, `max()` and `clamp()` follow the same rule, so `min(10px, 5)` can't compare a length with a number. Mixing in another type, as in `calc(10deg + 2px)`, triggers the same error.

The usual cause is a number that lost its unit, often after a hand edit or a preprocessor variable that was declared without one. Multiplication and division work differently: one side may be a plain number that scales the other, so `calc(4 * 1rem + 2px)` is valid.

Browsers ignore a declaration with a mistyped expression. The element keeps the `inset-inline-start` it got from earlier rules, usually `auto`, and ends up in the wrong place.

## Invalid example

```html
<div style="position: absolute; inset-inline-start: calc(1rem + 2);">Badge</div>
<div style="position: absolute; inset-inline-start: min(10px, 5);">Tooltip</div>
```

## Valid example

```html
<div style="position: absolute; inset-inline-start: calc(1rem + 2px);">Badge</div>
<div style="position: absolute; inset-inline-start: min(10px, 5vw);">Tooltip</div>
```