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?sub_confirmation=1
#css3 #css #csstricks
