Provide examples of CSS logical properties for writing-direction-agnostic layouts.

Provide examples of CSS logical properties for writing-direction-agnostic layouts.

• A. font-family, color, background.
• B. margin-left, padding-top, border-right, width, height.
• C. margin-inline-start, padding-block, border-block, inline-size, block-size.
• D. float, clear, display.

Answer: (C)

CSS logical properties express layout in terms of the writing direction and axes rather than fixed directions like left or top. They let margins, paddings, borders, and sizes adapt automatically when text flows RTL or when the writing mode changes from horizontal to vertical, keeping layout consistent without rewriting rules. The set shown uses inline-start for margin, which shifts with direction, and uses block- or inline- properties to target the correct axis: padding-block and border-block apply on the block (top/bottom) axis, while inline-size and block-size size along the inline and block axes, respectively. This combination demonstrates how spacing and sizing stay aligned with the writing direction. Other options mix fixed directions (left, right, top, bottom) or apply general properties that don’t respond to writing direction, so they don’t illustrate direction-agnostic layout as clearly.

CSS logical properties express layout in terms of the writing direction and axes rather than fixed directions like left or top. They let margins, paddings, borders, and sizes adapt automatically when text flows RTL or when the writing mode changes from horizontal to vertical, keeping layout consistent without rewriting rules. The set shown uses inline-start for margin, which shifts with direction, and uses block- or inline- properties to target the correct axis: padding-block and border-block apply on the block (top/bottom) axis, while inline-size and block-size size along the inline and block axes, respectively. This combination demonstrates how spacing and sizing stay aligned with the writing direction. Other options mix fixed directions (left, right, top, bottom) or apply general properties that don’t respond to writing direction, so they don’t illustrate direction-agnostic layout as clearly.