CSS Properties : inset-inline, inset-inline-start and inset-inline-end explained !

In this video, we will break down the CSS properties `inset-inline`, `inset-inline-start`, and `inset-inline-end` with simple examples to make them easy to understand.

These are logical properties in CSS that help with layout in a way that respects the writing direction of the content (like left-to-right or right-to-left languages).

`inset-inline`: Sets both the start and end inline offsets (like left and right in LTR).
`inset-inline-start`: Sets the offset from the start of the inline direction (left in LTR, right in RTL).
`inset-inline-end`: Sets the offset from the end of the inline direction (right in LTR, left in RTL).

📦 Visual Example : Imagine a box inside a container. You want to position it 20px from the left and 10px from the right in a left-to-right layout.

✅ Using Logical Properties:

.box {
position: absolute;
inset-inline-start: 20px;
inset-inline-end: 10px;
}

This will:
Push the box 20px from the left (in LTR)
Push the box 10px from the right (in LTR)

If the writing direction changes to RTL:
`inset-inline-start` becomes right
`inset-inline-end` becomes left

✅ Using `inset-inline` shorthand:

.box {
position: absolute;
inset-inline: 20px 10px; /* start end */
}

This is shorthand for:
inset-inline-start: 20px;
inset-inline-end: 10px;

🧭 Why Use Logical Properties?

They automatically adapt to different writing directions.
Great for internationalization and responsive design.


🔔 Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?...

#css3 #css #csstricks