CSS Properties : inset-inline, inset-inline-start and inset-inline-end explained ! скачать в хорошем качестве

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