HTML & CSS Interview Question #122

What are logical properties in CSS?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

Logical properties describe dimensions and spacing according to the document's writing mode and text direction rather than hard-coding physical left, right, top, and bottom sides. Examples include margin-inline, padding-block, inline-size, and border-inline-start.

Detailed Explanation

They make components more adaptable to right-to-left languages and different writing modes. For example, margin-inline-start maps to the logical start side instead of always meaning left.

Code Example

.container {
    max-inline-size: 75rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.card {
    padding-block: 1rem;
    padding-inline: 1.25rem;
}