Logical properties are a new way to define layout in CSS. They allow you to use logical directions (like start, end, inline, and block) instead of physical directions (like left, right, top, and bottom). This makes it easier to create layouts that work well in different writing modes and languages.
However, if you're used to working with physical properties, it can be a bit confusing at first. To help you out, here's a handy map of logical properties to their physical counterparts!
💬 Note
In this article, I'm assuming you're writing from left to right (LTR). If you're writing from right to left (RTL), the physical properties will be reversed. For example, left becomes right, and top becomes bottom.
