{
    "slug": "css_logical_properties",
    "term": "CSS Logical Properties",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "CSS properties that map to physical directions based on writing mode — margin-inline instead of margin-left/right, padding-block instead of padding-top/bottom — enabling RTL support automatically.",
    "long": "CSS logical properties replace directional properties with flow-relative equivalents: inline (horizontal in LTR, vertical in TTB) and block (vertical in LTR, horizontal in TTB). margin-inline-start replaces margin-left (automatically becomes margin-right in RTL). padding-block replaces padding-top + padding-bottom. border-inline-end replaces border-right. inset-inline-start replaces left. Use logical properties from the start of a project — retrofitting physical properties for RTL languages requires overriding every physical property in RTL stylesheets.",
    "aliases": [
        "logical properties",
        "inline start",
        "block start",
        "RTL CSS",
        "LTR"
    ],
    "tags": [
        "frontend",
        "css",
        "i18n"
    ],
    "misconception": "RTL support requires a separate RTL stylesheet — using logical properties eliminates the need for a separate RTL override stylesheet; the browser applies the correct physical direction based on the dir attribute.",
    "why_it_matters": "A site using margin-left: 16px needs margin-right: 16px in its RTL stylesheet — the same site using margin-inline-start: 16px handles both LTR and RTL automatically with one rule.",
    "common_mistakes": [
        "Mixing physical and logical properties — margin-left alongside margin-inline-start causes conflicts.",
        "Using logical properties for decorative directional elements — a left-pointing arrow should still be physical.",
        "Not setting dir=rtl on the html element for RTL languages — logical properties require a direction context.",
        "Browser support gaps — inset-* properties have slightly less support than margin-*/padding-*."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "rtl_support",
        "css_cascade",
        "responsive_design_patterns"
    ],
    "prerequisites": [
        "rtl_support",
        "responsive_design_patterns",
        "css_custom_properties"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values"
    ],
    "bad_code": "/* Physical properties — requires RTL override:\n.nav-item { margin-left: 16px; border-right: 1px solid; padding-left: 8px; }\n/* RTL override needed: */\n[dir=rtl] .nav-item { margin-left: 0; margin-right: 16px;\n    border-right: none; border-left: 1px solid; padding-left: 0; padding-right: 8px; }",
    "good_code": "/* Logical properties — RTL works automatically:\n.nav-item {\n    margin-inline-start: 16px;  /* margin-left in LTR, margin-right in RTL */\n    border-inline-end: 1px solid; /* border-right in LTR, border-left in RTL */\n    padding-inline-start: 8px;\n}\n/* No RTL override needed — browser handles it based on dir attribute */",
    "quick_fix": "Replace margin-left/right with margin-inline-start/end and padding-top/bottom with padding-block-start/end — these flip automatically for RTL languages without extra CSS",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_logical_properties",
        "html_url": "https://codeclaritylab.com/glossary/css_logical_properties",
        "json_url": "https://codeclaritylab.com/glossary/css_logical_properties.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[CSS Logical Properties](https://codeclaritylab.com/glossary/css_logical_properties) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_logical_properties"
            }
        }
    }
}