What are logical properties? W3C CSS Logical Properties Values and Level 1 MDN CSS Logical Properties and Values Stylelint use logical properties plugin Property and Value Mapping Assuming left to right directionality: <table> <thead> <tr> <th>Physical Property</th> <th>Logical Property</th> </tr> </thead> <tbody> <tr> <td><code>top</code></td> <td><code>inset-block-start</code></td> </tr> <tr> <td><code>right</code></td> <td><code>inset-inline-end</code></td> </tr> <tr> <td><code>bottom</code></td> <td><code>inset-block-end</code></td> </tr> <tr> <td><code>left</code></td> <td><code>inset-inline-start</code></td> </tr> </tbody> </table> <table> <thead> <tr> <th>Physical Property</th> <th>Logical Property</th> </tr> </thead> <tbody> <tr> <td><code>margin-top</code></td> <td><code>margin-block-start</code></td> </tr> <tr> <td><code>margin-right</code></td> <td><code>margin-inline-end</code></td> </tr> <tr> <td><code>margin-bottom</code></td> <td><code>margin-block-end</code></td> </tr> <tr> <td><code>margin-left</code></td> <td><code>margin-inline-start</code></td> </tr> </tbody> </table> <table> <thead> <tr> <th>Physical Property</th> <th>Logical Property</th> </tr> </thead> <tbody> <tr> <td><code>padding-top</code></td> <td><code>padding-block-start</code></td> </tr> <tr> <td><code>padding-right</code></td> <td><code>padding-inline-end</code></td> </tr> <tr> <td><code>padding-bottom</code></td> <td><code>padding-block-end</code></td> </tr> <tr> <td><code>padding-left</code></td> <td><code>padding-inline-start</code></td> </tr> </tbody> </table> Tags: CSS