CSS Properties : inset-block, inset-block-start, inset-block-end explained !

In this video, we will break down the CSS properties inset-block, inset-block-start, and inset-block-end with simple explanations and examples.

These properties are part of logical properties in CSS, which adapt to the writing mode (like left-to-right or top-to-bottom). Instead of using physical directions like top or bottom, they use block and inline directions.

inset-block: Sets both the start and end of the block direction (like top and bottom in horizontal writing).
inset-block-start: Sets the offset from the start of the block direction.
inset-block-end: Sets the offset from the end of the block direction.

✅ Simplified Analogy
Think of it like this:

inset-block-start = top (in horizontal writing)
inset-block-end = bottom
inset-block = shorthand for both top and bottom

🧪 Why Use Logical Properties?
They make your layout adaptable to different languages and writing directions. For example, in vertical writing (like Japanese), inset-block-start might mean left instead of top.

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

#css3 #css #csstricks