Logical Properties
What are Logical Properties?
Imagine writing a letter. In English, you read left-to-right, so the start of a paragraph is on the left. In Arabic or Hebrew, you read right-to-left, so the paragraph starts on the right. If you tell a button to have "20px of padding on the left", that padding is in the wrong spot for right-to-left readers!In CSS, Logical Properties replace physical directions (left, right, top, bottom) with writing-direction-relative terms (start, end, block, inline):
padding-inline-start instead of padding-left.padding-inline-end instead of padding-right.margin-block-start instead of margin-top.Why does it matter?
Logical properties allow your website layouts to adapt automatically when translated into different languages. If a user switches the site language to Arabic, the browser flips the page layout and spacing dynamically without you needing to write custom styles for right-to-left pages.Syntax Breakdown
padding-inline: 20px; — Shorthand applying padding to both start and end horizontal axes (left and right in English).padding-block: 10px; — Shorthand applying padding to block vertical axes (top and bottom).Common Mistakes
inline is horizontal (like lines of text) and block is vertical (like stacked blocks). So margin-inline handles left/right margins, and margin-block handles top/bottom margins!Quick Reference
inline axis — Horizontal direction (in left-to-right writing).block axis — Vertical direction (in left-to-right writing).padding-inline — Sets left and right padding dynamically.Your Task
Set the `padding-inline` property of the `.button` class to `20px` to add horizontal spacing.
index.html
Type code above to start the lesson.
Live Preview