CSS logical properties versus physical properties

WHAT THIS TESTS: This probes whether you can build internationalized layouts and understand the inline and block axes defined by writing mode and direction, rather than hard-coding physical edges.

A GOOD ANSWER COVERS: Logical properties describe boxes relative to the flow of content. The inline axis runs in the direction text flows; the block axis is perpendicular to it. So padding-inline-start is the padding at the beginning of the line, padding-block-end sits after the last line, and margin-inline collapses to both inline sides. In a left-to-right language the inline start equals the left, but in a right-to-left language like Arabic it becomes the right, and in vertical writing modes the axes rotate. Using padding-inline-start instead of padding-left means a single rule produces correct spacing in every writing direction. The benefit is internationalization with no duplicated or mirrored stylesheets.

COMMON WRONG ANSWERS: Saying logical properties are just new names for the same physical sides. Believing you still need a separate direction: rtl override file when you already use logical properties. Confusing the inline axis with horizontal and the block axis with vertical as fixed concepts rather than flow-relative ones.

LIKELY FOLLOW-UPS: What are the inline and block shorthands, and how does inset relate to top, right, bottom, left. How do logical properties interact with the dir attribute and the writing-mode property. What is the migration cost in an existing codebase full of physical properties.

ONE CONCRETE EXAMPLE: A button has padding-inline-start: 24px to leave room for a leading icon. In English the gap appears on the left of the label; switch the document to dir=rtl for Arabic and the same gap automatically moves to the right where the line now starts, with zero extra CSS.