Redefining Element Positioning With CSS Inset Property

Building responsive web pages is essential if you want your website to run flawlessly on multiple browsers without hiccups. However, websites can’t be fully responsive without a proper layout. Here the CSS position property lets you do this.

The CSS position properties set a specified element relative to its parent or the viewport. The CSS position properties take in five values, namely,

• static: This is the default position of elements. That is, elements remain in the normal order in the DOM tree. When an element is static, the CSS position property’s top, right, bottom, and left properties do not take effect.
• relative: This is positioned relative to the document’s normal flow. The top, right, bottom, and left properties can be used to set an offset position about the element position.
• absolute: This is positioned relative to its nearest ancestor and then removed from the document flow. If the given element has no positioned ancestor, the element’s position is set relative to the body. The top, right, bottom, and left properties can be used to set an offset position about the element position.
• fixed: This is positioned relative to the viewport in a fixed manner. When the page is scrolled, the element remains in the same place. We can use the top, right, bottom, and left properties to set an offset position about the element position.
• sticky: This is positioned based on the user’s scroll position.

When the CSS position is applied, we can use the CSS position sub-properties like; top, right, bottom, and left, respectively. However, using these properties can make us write more lines of code, as we are required to type them one after another on a separate line explicitly.

However, we can use the CSS Inset property to solve this. Instead of using the top, right, bottom, and left, the CSS Inset property serves as a shorthand for declaring the top, right, bottom, and left in a single line.

In this tutorial, we will look into some of the commonly used CSS Inset logical properties and when to use them.

So, let’s get started!

What is the CSS Position Property?

CSS position property defines the way an element is positioned within a document. This property is used to determine the final position of an element on a page.

CSS position property, along with the left/right, top/bottom, z-index, etc., determines the position of an element in a document.

The position property has five different values. Each value affects how an element is displayed relative to its normal position in a document. For example, static position, relative position, absolute position, fixed position, and sticky position are all possible values.

Developers can use the position property to create complex layout and design effects.

What is CSS Inset Property?

The CSS Inset property is a shorthand property of the CSS position offset properties of the top, right, bottom, and left, respectively. The CSS Inset property gives us access to declare the four properties top, right, bottom, and left in one declaration. Some examples of the CSS Inset property are inset: 2px 2px 2px 2px is equivalent to top: 2px; right: 2px; bottom: 2px; left: 2px.

For the CSS Inset property to take effect, the specified element has to have the CSS position property set. However, if the defined element is set to static, the CSS Inset property will not take effect.

The CSS Inset property, like margin and padding, mostly takes three values. These values can either be the length, keyword, or global values.

Syntax:

Length

One of the CSS Inset property values is length, specified in different ways. Let’s consider those ways by taking an example of each.

• Inset: 1em: This is applied to the four edges of the element, i.e., top, right, bottom, and left, respectively.
• Inset: 1.9rem 2.5rem: This is applied to the four edges of the element where 1.9rem affects the top and bottom while 2.5rem affects the left and right.
• Inset: 10px 15px 20px: This is applied to the four edges of the element where 10px affects the top, 15px affects the right and left, and 20px affects the bottom.
• Inset: 10px 15px 20px 30px: This is applied to the four edges of the element where 10px affects the top, 15px affects the right, 20px affects the bottom, and 30px affects the left.

One another way can be representing the values in percentage(%), considering the example below.

• Inset: 20% 30%: This is applied to the four edges of the element where 20% is set to the top and bottom, and 30% is set to the left and right.

Keyword

Another CSS Inset property value is the keyword, which is specified with auto set the element’s position to auto. Let’s look at the way of representing the value.

• Inset:auto: This is applied to the four edges of the element, i.e., top, right, bottom, and left, respectively.

Global

The CSS Inset property can also take in global values. Consider the following global values below.

• Inset: inherit: Inherit property from its parent element.
• Inset: initial: set property to its default value.

Let’s consider an example code for better understanding.

HTML:

CSS:

Browser Output:

CodePen:

See the Pen
[1] add inset property by Ocxigin (@ocxigin)
on CodePen.

When to use CSS Inset Property?

The CSS Inset property is a shorthand property of the CSS position sub-properties of the top, right, bottom, and left. CSS Inset property can be used when you need to add a specific amount of space between a given element and its containing parent element.

For example, if you have < p > or < img > tag within a containing parent < div >, you can use the CSS Inset property to add the amount of space needed. This can be on the top, the right, bottom, or left edge of the element, or you can apply it to the four edges at once in one declaration.

Inset and Position Offset Physical Property

CSS Inset property and position offset are physical properties that refer to the positioning of an object or element relative to its container. CSS Inset property determines how much space exists between the edges of an object and its container. At the same time, position offset defines the distance between the object and a reference point, typically its parent element.

These properties are commonly used in web design to create layouts and position elements on a page. In this section, we’ll discuss how the CSS Inset property can be used to replace the position offset properties.

Using CSS position properties

The CSS position properties top, right, bottom, and left are handy when we need to set a vertical or horizontal offset to a particular element.

How the element is positioned on its container or viewport based on the position property value determines its offset from the position properties.

HTML:

CSS:

Browser Output:

CodePen:

See the Pen
[2] using position property by Ocxigin (@ocxigin)
on CodePen.

From the code example above, we make use of CSS position properties top, right, bottom and left to position each box item around the parent element.

Now let’s see how we can use the CSS Inset property to achieve the same result.

Using CSS Inset property

We have seen the effect of using the CSS position properties on a specified element. Let’s see how the CSS Inset property can achieve the same result.

HTML:

CSS:

From the code example above, we used the CSS Inset property to replace the position properties as you can see, we have some values with px units while some are set as rem units.

For example, take the firstChild element where the values with rem units are the values we specify initially to the element while the values with px are the computed values. Compare the commented code with the new CSS Inset property values.

The following section will explain how these computed values are generated in the CSS Inset property.

Browser Output:

CodePen:

See the Pen
[3] using inset property by Ocxigin (@ocxigin)
on CodePen.

From the browser output, we have the same output as the previous one when we use the CSS Inset property.

Computed Values

The computed values in the CSS Inset property are transferred from parent to child(ren) during inheritance when we set a fixed value to a particular element position. For example, the firshChild element takes in a value of bottom 4rem and right of 4rem while a computed value of 206px is generated for the top and left positions.

Now let’s see how these computed values of the CSS Inset property are generated.

• Right-click on your browser.
• Next, click on inspect (This will open up your DevTools).
• Next, select the element section.
• Next, click on the first element tag on your DevTools.
• Next, select computed.

The box model shows us the computed values generated as you can see, we have 206 at the top, 64 on the right side, 64 at the bottom, and 206 on the left.

The computed values are calculated in pixels (px), and 16 pixels (16px) is equal to 1rem unit, so if you divide 64 by 16, you should get 4 (64/16 = 4). So the 4 is the 4rem we set initially while the 206 are generated values.

So to find out how the 206 is the computed values, let’s see the examples as follows:

• Parent element width/height is 300px
• Child element width/height is 30px (10% is 30px of 300px)
• Inset bottom is 64px
• The inset top computed as 300px – (64px + 30px) = 206px

Hence, the computed values for the inset top is 206px. So to get the inset top not defined from our CSS file, the browser has to add the child values and subtract them from the parent element value. The final remainder is the computed values.

DevTools:

The browser output above displays the computed values from the box model.

Using Inset with CSS position values

So far, we have discussed the usage of position properties such as top, right, bottom, and left. However, the values we assign to the position property also affect how it will behave.

For example, the CSS Inset property will not affect the static value of the position property, as this is treated just like a normal document without a position. While other values have different ways they affect the element.

HTML:

CSS:

Browser Output:

CodePen:

See the Pen
[4]Position Values with inset by Ocxigin (@ocxigin)
on CodePen.

From the browser output, we created a simple page to display how an element can be staked above other elements using the CSS position sticky value of the position property.

When you use the scrollbar and scroll up, observe how the display button below flows with the rest of the page as you scroll up.

CSS Inset Logical Properties

We have seen how the CSS Inset property works with the help of examples. Now let’s look into the inset sub-properties. CSS Inset property includes;

• inset-block
• inset-block-end
• Inset-block-start
• inset-inline
• inset-inline-end
• Inset-inline-start

The CSS Inset properties and sub-properties are part of the CSS logical properties and values specification. Sub-properties of the CSS Inset property define the logical offset based on the writing mode set on the document. To fully understand how the CSS Inset sub-properties work, we must know what writing-mode is. Let’s take a look at it.

Writing-mode property

CSS comes with a writing-mode property used to set the block or inline direction of a document, which can be horizontal or vertical. For example, elements are stacked by default from top to bottom, left to right in the DOM, but we can use the writing-mode to change the stacking order to vertical right to left or horizontal left to right.

Syntax:

For better understanding, see the illustration below:

We might do this for different reasons; for example, words are written right to left in Arabic. In this case, we can set the document to flow horizontally from right to left to accommodate the Arabic writing style. In English, where words are written left to right, we might do this for aesthetics.

HTML:

CSS:

JavaScript:

Browser Output:

CodePen:

See the Pen
[5b]writing Mode by Ocxigin (@ocxigin)
on CodePen.

From the browser output, we set the second card on the right to flow vertically and then start from left to right. As you can see, we have the heading from left to right. Click on the toggle button to switch the writing mode.

Inset-block

Inset-block comes under the category of logical properties in CSS Inset property, which is used to set an element’s start and end distance based on the writing-mode set on the element, i.e., done in a block direction. The inset-block also serves as a shorthand property of inset-block-start and inset-block-end.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

JavaScript:

Browser Output:

CodePen:

See the Pen
[11] inset-inline-start by Ocxigin (@ocxigin)
on CodePen.

From the browser output, we set the second card on the right to flow vertically and then start from left to right.

Inset-block-end

Inset-block-end comes under the category of logical properties in the CSS Inset property, which is used to set the end distance of an element based on the writing-mode set on the element.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

JavaScript:

Browser Output:

CodePen:

See the Pen
[11] inset-inline-start by Ocxigin (@ocxigin)
on CodePen.

Have it in mind that the distance set by the inset block properties takes effect outside the margin.

Inset-block-start

Inset-block-start comes under the category of logical properties in the CSS Inset property, which is used to set the start distance of an element based on the writing-mode set on the element.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

Browser Output:

CodePen:

See the Pen
[11] inset-inline-start by Ocxigin (@ocxigin)
on CodePen.

From the browser output, click on the bottom to see the effect in action.

Inset-inline

Inset-inline comes under the category of logical properties in the CSS Inset property, which is used to set an element’s start and end distance based on the writing-mode set on the element, i.e., done in an inline direction. The inset-inline also serves as a shorthand property of inset-inline-start and inset-inline-end.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

JavaScript:

Browser Output:

From the browser output, the distance is added left and right of the element. Click on the toggle button to switch the effect.

Inset-inline-end

Inset-inline-end comes under the category of logical properties in the CSS Inset property, which is used to set a specific amount of space between the end distance of an element and its containing element based on the writing-mode set on the element, i.e., done in an inline direction.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

JavaScript:

Browser Output:

CodePen:

See the Pen
[11] inset-inline-start by Ocxigin (@ocxigin)
on CodePen.

From the browser output, an offset of 2em is added to the end of the element. Click on the button to toggle.

Inset-inline-start

Inset-inline-start comes under the category of logical properties in the CSS Inset property, which is used to set a specific amount of space between the start of an element and its containing element based on the writing-mode set on the element, i.e., done in an inline direction.

Syntax:

Now, with the below code, you can realize how the CSS Inset property behaves. Just type and run the code.

HTML:

CSS:

JavaScript:

Browser Output:

CodePen:

See the Pen
[11] inset-inline-start by Ocxigin (@ocxigin)
on CodePen.

From the browser output, click on the toggle bottom to see the effect.

Browser Compatibility

The CSS Inset property still has good support from major browsers, as indicated below:

Source

Using the CSS Inset property, developers can position elements inside containers by defining how far away from the edges they should be. However, the compatibility of this property may differ depending on the browser.

Most modern browsers like Chrome and Firefox support the CSS Inset property without issues. However, newer versions of Internet Explorer do not support this property. In such cases, developers may need to use alternative positioning methods such as top, bottom, left and right.

It’s also worth noting that the CSS Inset Property behaves differently across different browsers, leading to unexpected layout issues. To avoid these issues, developers should thoroughly test their web pages across multiple browsers before releasing them.

To ensure this LambdaTest, a unified digital experience testing platform, enables developers and testers to test their websites or mobile applications for cross browser compatibility over more than 3000+ browsers and OS combinations.

To get familiar with this, watch the below tutorial to learn how to perform live-interactive testing of your websites using the LambdaTest platform.

You can also subscribe to our LambdaTest YouTube Channel to learn about automation tools like Selenium, Playwright, Appium, and many more tutorials around testing.

Conclusion

The blog post on the CSS Inset property has ended. I hope you had fun and picked up some new information. Now, the developers have a robust tool for positioning elements inside containers in the CSS Inset property. It is a well-liked option for developing responsive and flexible layouts because it enables precise control over the distance between an element and the edges of its parent container.

However, compatibility issues might occur using the CSS Inset property, particularly with older browsers, just like with any other CSS property. To ensure consistent behavior, developers must extensively test all modern browsers and their iterations with LambdaTest. Please feel free to post any additional queries in the comments section; I’ll be happy to respond.