CSS inset Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The inset property in CSS is a shorthand property for setting the top, right, bottom, and left properties all at once.

This property can simplify your CSS by reducing the need to specify each side individually, making your code cleaner and more concise.

The inset property is especially useful when positioning elements with absolute or fixed positioning.

💡 Syntax

The syntax for the inset property allows you to define one, two, three, or four values, corresponding to the top, right, bottom, and left properties.

Syntax

Copied

element {
  inset: top right bottom left;
}

If one value is given, it applies to all four sides.
If two values are given, the first applies to the top and bottom, and the second to the right and left.
If three values are given, the first applies to the top, the second to the right and left, and the third to the bottom.
If four values are given, they apply to the top, right, bottom, and left respectively.

🎛️ Default Value

The default value of the inset property is auto for all sides, meaning the element will not have any specific positioning applied.

🏠 Property Values

Value	Description
length	Specifies a fixed size for the offset (e.g., 10px, 2em).
percentage	Specifies the offset as a percentage of the containing block's size (e.g., 50%).
auto	The default value which means the position is determined by other factors (e.g., position property).

📄 Example

In this example, we'll position a box 10px from the top, 20px from the right, 30px from the bottom, and 40px from the left of its containing element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS inset Property Example</title>
  <style>
    .container {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
    }
    .box {
      position: absolute;
      inset: 10px 20px 30px 40px;
      background-color: #ff5733;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Inset Property</h1>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The inset property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The inset property is a convenient shorthand for setting the top, right, bottom, and left properties in CSS.

By using this property, you can simplify your CSS and make your positioning rules more readable. Experiment with different values and see how this property can help streamline your web design process.