Instruction: Describe logical and physical properties in CSS and how they relate to responsive design and internationalization.
Context: This question tests the candidate's understanding of logical and physical properties in CSS, crucial for building responsive and internationally adaptable web designs.
Official answer available
Preview the opening of the answer, then unlock the full walkthrough.
To start, physical properties in CSS refer to those that are directionally explicit, such as margin-left, padding-right, left, and top. These properties are based on the physical dimensions of the device or screen—width and height—and they don't change regardless of the content's direction. For instance, margin-left will always apply a margin to the left side of an element, whether the text is written in a left-to-right (LTR) or right-to-left (RTL) language.
On the other hand, logical properties are directionally agnostic. They adapt based on the content's writing mode, direction, and orientation, making them particularly useful for internationalization and responsive design. Instead of specifying margin-left, you would use margin-inline-start. This means the margin applies to the start of the inline axis,...