inset-inline

Overview

The inset-inline property allows you to define an element's logical start and end offsets in the inline direction. This property sets the distance between an element and its parent in the inline direction and only takes effect when the position property is specified. Additionally, it represents a shorthand for its constituent properties: inset-inline-start and inset-inline-end.

Caution: The inset-inline property is a part of the CSS Logical Properties and Values Level 1 specification, which is in Editor's Draft status. The definition and information about this property may be subject to change before its official recommendation.

Examples and Usage

There are different ways for setting the values of inset-inline. When it has two values, it sets the distance at start and end separately:

div {
  inset-inline: 10px 25px; /* 10px at start and 25px at end */
}

On the other hand, if it contains one value, it sets the distance at start and end like so:

div {
  inset-inline: 10px; /* 10px at start and end */
}

Moreover, inset-inline and inset-block are akin to the top, bottom, left, and right properties. However, they depend on the block and inline directions, which are defined by text-orientation, writing-mode, and direction.

Consider the following example:

<div>
  <p class="sampleText">Sample text</p>
</div>

div {
  background-color: lightblue;
  width: 140px;
  height: 140px;
}

.sampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline: 15px 35px;
  background-color: #b3b300;
}

In this case, we set the writing-mode to vertical-lr, which means that the text flows from top to bottom and from left to right. As a result, inset-inline behaves differently compared to when the writing-mode is set to horizontal-lr.

When using vertical-lr, the inset-inline property sets the element's offset from the top edge at 15px and from the bottom edge at 35px, resembling the behavior of top and bottom. On the other hand, if the writing-mode were set to horizontal-lr, the inset-inline property would act like the left and right properties, positioning the element with a 15px offset from the left edge and a 35px offset from the right edge.

Syntax and Values

The inset-inline property can accept various values, including:

inset-inline: length|percentage|auto|inherit|initial|unset;

Each value serves a specific purpose:

Associated Properties

• inset-block

• inset-block-end

• inset-block-start

• inset-inline-end

• inset-inline-start

Tips and Tricks

• Multilingual websites: Use inset-inline with writing-mode and direction for efficient positioning in multilingual designs.

• Negative values: Use caution with negative values to avoid unintended overlapping or out-of-bounds elements.

• Flexible units: Use vw, vh, or percentages for responsive positioning that adapts to the viewport size.

• Browser compatibility: Check compatibility and use fallback solutions for older browsers when necessary.

• Position requirement: Ensure a position property(e.g., relative, absolute, or fixed) is specified for the element when using inset-inline.

Browser Compatibility

Useful Resources

Specific Browser Compatibility Information

CSS Logical Properties and Values Level 1 specification