Explain the difference between logical and physical properties in CSS.
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.
Updated
Official answer available
Read the opening below, then unlock the full answer and practical guidance.
Physical properties name sides such as left, right, top and bottom. Logical properties name inline/block starts, ends and sizes, which map to physical sides using writing-mode and direction. They are not viewport breakpoints.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS example</title> <style> .sample { margin-inline-start: 24px; padding-block: 8px; border: 1px solid;...