CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Logical Properties and Values Level 1</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 60c422380, updated Thu Feb 20 19:11:22 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-logical-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="00a4565adc80e6981e7fdefb92480d41c0f5ffea" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> @media (min-width: 40em) { #mapping-diagram figure { width: 49%; float: left; } #mapping-diagram figure:first-of-type { margin-right: 2%; } } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Logical Properties and Values Level 1</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-01-24">24 January 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-logical-1/">https://www.w3.org/TR/css-logical-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/" rel="prev">https://www.w3.org/TR/2018/WD-css-logical-1-20180827/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-logical-1">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (Microsoft) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-logical-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. These properties are writing-mode relative equivalents of their corresponding physical properties. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-logical” in the title, like this: “[css-logical] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-logical%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#values">1.1 Value Definitions</a> </ol> <li> <a href="#directional-keywords">2 Flow-Relative Values: block-start, block-end, inline-start, inline-end</a> <ol class="toc"> <li><a href="#caption-side">2.1 Logical Values for the caption-side Property</a> <li><a href="#float-clear">2.2 Flow-Relative Values for the float and clear Properties</a> <li><a href="#text-align">2.3 Flow-Relative Values for the text-align Property</a> </ol> <li><a href="#page">3 Flow-Relative Page Classifications</a> <li> <a href="#box">4 Flow-Relative Box Model Properties</a> <ol class="toc"> <li><a href="#dimension-properties">4.1 Logical Height and Logical Width: the block-size/inline-size, min-block-size/min-inline-size, and max-block-size/max-inline-size properties</a> <li><a href="#margin-properties">4.2 Flow-Relative Margins: the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <li><a href="#position-properties">4.3 Flow-Relative Offsets: the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <li><a href="#padding-properties">4.4 Flow-Relative Padding: the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <li> <a href="#border-properties">4.5 Flow-Relative Borders</a> <ol class="toc"> <li><a href="#border-width">4.5.1 Flow-Relative Border Widths: the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <li><a href="#border-style">4.5.2 Flow-Relative Border Styles: the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <li><a href="#border-color">4.5.3 Flow-Relative Border Colors: the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <li><a href="#border-shorthands">4.5.4 Flow-Relative Border Shorthands: the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> </ol> <li><a href="#border-radius-properties">4.6 Flow-Relative Corner Rounding: the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a> <li><a href="#logical-shorthand-keyword">4.7 Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> </ol> <li><a href="#acknowledgements">5 Acknowledgements</a> <li><a href="#changes">6 Changes</a> <li><a href="#privacy"> Privacy Considerations</a> <li><a href="#security"> Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> Note: See <a data-link-type="biblio" href="#biblio-css-writing-modes-4" title="CSS Writing Modes Level 4">[css-writing-modes-4]</a> for a proper introduction to writing modes; this module assumes familiarity with its terminology. Because different writing systems are written in different directions, a variety of <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a> exist: left to right, top to bottom; right to left, top to bottom; bottom to top, right to left; etc. logical concepts like the “start” of a page or line map differently to physical concepts like the “top” of a line or “left edge” of a paragraph. Some aspects of a layout are actually relative to the writing directions, and thus will vary when the page is translated to a different system; others are inherently relative to the page’s physical orientation. <div class="example" id="example-6f979823"> <a class="self-link" href="#example-6f979823"></a> For example, lists, headings, and paragraphs are typically left-aligned in English; but actually they are start-aligned, because in Arabic the same constructs are right-aligned, and a multilingual document will need to accommodate both writing systems accordingly. The following code exemplifies how using logical syntax can help you write code that works across different writing systems: <figure> <img height="109" src="./images/example01.png" width="300"> <figcaption>Rendering of the below code in a compatible browser</figcaption> </figure> <pre class="highlight"><c- p><</c-><c- f>blockquote</c-> <c- e>dir</c-><c- o>=</c-><c- s>"auto"</c-><c- p>></c->Quotation in English<c- p></</c-><c- f>blockquote</c-><c- p>></c-> <c- p><</c-><c- f>blockquote</c-> <c- e>dir</c-><c- o>=</c-><c- s>"auto"</c-><c- p>></c->اقتباس في العربية<c- p></</c-><c- f>blockquote</c-><c- p>></c-> </pre> <pre class="highlight">blockquote <c- p>{</c-> <c- k>text-align</c-><c- p>:</c-> start<c- p>;</c-> <c- c>/* left in latin, right in arabic */</c-> margin-inline-start: <c- m>0</c-><c- k>px</c-><c- p>;</c-> <c- c>/* margin-left in latin, margin-right in arabic */</c-> border-inline-start: <c- m>5</c-><c- k>px</c-> solid gray<c- p>;</c-> <c- c>/* border-left in latin, border-right in arabic */</c-> padding-inline-start: <c- m>5</c-><c- k>px</c-><c- p>;</c-> <c- c>/* padding-left in latin, padding-right in arabic */</c-> <c- p>}</c-> </pre> Documents might need both logical and physical properties. For instance the drop shadows on buttons on a page must remain consistent throughout, so their offset will be chosen based on visual considerations and physical directions, and not vary by writing system. </div> Since CSS was originally designed with only physical coordinates in its controls, this module introduces text-flow–relative equivalents so that declarations in a CSS style sheet can be expressed in <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> terms. It defines the mapping and cascading of equivalent properties, some new properties and values equivalent to those in CSS2.1, and the principles used to derive their syntaxes. Future CSS specifications are expected to incorporate both sets of coordinates in their property and value definitions, so this module will not track the introduction of flow-relative variants of newer CSS features. <a href="http://www.w3.org/TR/css-writing-modes/">CSS Writing Modes</a>’ <a href="https://www.w3.org/TR/css-writing-modes-3/#abstract-box">Abstract Box Terminology</a> section defines how to map between flow-relative and physical terms. This mapping, which depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used values</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a>, controls the interpretation of <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative②">flow-relative</a> keywords and properties. <div id="mapping-diagram"> <figure> <img src="diagrams/sizing-ltr-tb.svg"> <figcaption> Correspondence of physical and flow-relative terms in typical English text layout </figcaption> </figure> <figure> <img src="diagrams/sizing-ttb-rl.svg"> <figcaption> Correspondence of physical and flow-relative terms in vertical Chinese text layout </figcaption> </figure> </div> Note: Due to its interaction with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation①">text-orientation: upright</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> and text-orientation. <div class="issue" id="issue-3d880eb1"> <a class="self-link" href="#issue-3d880eb1"></a> Things That Are Unstable Since implementation of parts of this module is effectively required for shipping an implementation of <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes</a> on the Web (in order to correctly implement the default HTML styles), the CSSWG resolved that the requisite features in <a href="#directional-keywords">§ 2 Flow-Relative Values: block-start, block-end, inline-start, inline-end</a> and <a href="#box">§ 4 Flow-Relative Box Model Properties</a> are approved for shipping. (See <a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0043.html">FPWD announcement</a> for additional background.) However, there are a few significant open issues: <ul> <li>The logical keyword on shorthands, because the name of the keyword may change or it may be replaced by some other syntactic marker. (This feature will be deferred from this level for further development if there is no clearly satisfactory mechanism proposed, see <a href="https://github.com/w3c/csswg-drafts/issues/1282">Issue 1282</a>.) <li>Whether flow-relative longhands inherit from their namesake on the parent, or are mapped to a physical property and inherit from that property. (See <a href="https://github.com/w3c/csswg-drafts/issues/3029">Issue 3029</a>.) <li>Whether shorthands like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> expand to both sets of longhands, or only the ones that were set. (See <a href="https://github.com/w3c/csswg-drafts/issues/3030">Issue 3030</a>.) </ul> Comments, suggestions, and use cases are welcome on these issues. Please file them in GitHub, tweet them to @csswg, or send them to www-style@w3.org. </div> <h3 class="heading settled" data-level="1.1" id="values">1.1. Value Definitions<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="directional-keywords">2. Flow-Relative Values: block-start, block-end, inline-start, inline-end<a class="self-link" href="#directional-keywords"></a></h2> Many CSS properties have historically accepted <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directional-keyword">directional keyword</dfn> values that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical">physical</a> (top, bottom, left, right). This specification introduces <a data-link-type="dfn" href="#directional-keyword" id="ref-for-directional-keyword">directional keyword</a> values that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative③">flow-relative</a>: block-start, block-end, inline-start, inline-end. A property’s effect can be either 1-dimensional or 2-dimensional. When contextually constrained to one dimension, the flow-relative keywords are abbreviated (to start and end). CSS Level 2 properties are here redefined to also accept <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative④">flow-relative</a> directional keywords. Such values can be used in place of the corresponding physical values. For properties that take multiple keywords, combinations of flow-relative and physical values are not allowed (unless otherwise specified in a future specification). Note: Newer CSS specifications are expected in most cases to define <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑤">flow-relative</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-relative" id="ref-for-line-relative">line-relative</a> values instead of or in addition to any <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical①">physical</a> ones. In general, the mapping of such relative values are expected to use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①">writing mode</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a> when affecting the box itself, and that of the box itself when affecting its contents. Regardless, which writing modes is used for the mapping needs to be explicitly defined. <h3 class="heading settled" data-level="2.1" id="caption-side">2.1. Logical Values for the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-caption-side" id="ref-for-propdef-caption-side">caption-side</a> Property<a class="self-link" href="#caption-side"></a></h3> <table class="def propdef partial" data-link-for-hint="caption-side"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-caption-side" id="ref-for-propdef-caption-side①">caption-side</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> inline-end <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword </table> These two values are added only for implementations that support left and right values for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-caption-side" id="ref-for-propdef-caption-side②">caption-side</a>. The left and right values themselves are defined to be <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-relative" id="ref-for-line-relative①">line-relative</a>. The existing top and bottom values are idiosyncratically redefined as assigning to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> sides of the table, respectively. The mapping on this property uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode③">writing mode</a> of the caption’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①">containing block</a> (that is, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box">table wrapper box</a>). <h3 class="heading settled" data-level="2.2" id="float-clear">2.2. Flow-Relative Values for the <a class="property css" data-link-type="property">float</a> and clear Properties<a class="self-link" href="#float-clear"></a></h3> <table class="def propdef partial" data-link-for-hint="float"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property">float</a>, clear <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> inline-end <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword </table> The mapping on these properties uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode④">writing mode</a> of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block②">containing block</a>. Note: These properties are 1-dimensional in CSS2, but are planned to be expanded to two dimensions, and therefore are given unabbreviated <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑥">flow-relative</a> keywords. <h3 class="heading settled" data-level="2.3" id="text-align">2.3. Flow-Relative Values for the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> Property<a class="self-link" href="#text-align"></a></h3> <table class="def propdef partial" data-link-for-hint="text-align"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align①">text-align</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> end <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword </table> These values are normatively defined in <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[css-text-3]</a>. <h2 class="heading settled" data-level="3" id="page">3. Flow-Relative Page Classifications<a class="self-link" href="#page"></a></h2> In CSS, all pages are classified by user agents as either left pages or right pages. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Which page is first in a spread, however, depends on whether the page progression is left-to-right or right-to-left. To allow control of page breaking to the page that is on the earlier or later side of a spread, rather than to the left or right side of a spread, this module introduces the following additional keywords for the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before</a> properties <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="logical-page" data-dfn-type="value" data-export id="valdef-logical-page-recto">recto</dfn> <dd> Equivalent to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> in left-to-right page progressions and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a> in right-to-left page progressions. <dt><dfn class="dfn-paneled css" data-dfn-for="logical-page" data-dfn-type="value" data-export id="valdef-logical-page-verso">verso</dfn> <dd> Equivalent to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left①">left</a> in left-to-right page progressions and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right①">right</a> in right-to-left page progressions. </dl> These values are computed as specified and are further defined in <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[css-break-3]</a>. Although authors typically place page numbers using physical placements, the contents of headers often follows conventions depending on which page in the spread is earlier. Therefore the following flow-relative <a href="https://www.w3.org/TR/CSS2/page.html#page-selectors">page selectors</a> are also added to support flow-relative page selection: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="logical-page-selector" data-dfn-type="value" data-export id="valdef-logical-page-selector-recto">:recto</dfn> <dd> Equivalent to ':right' in left-to-right page progressions and ':left' in right-to-left page progressions. <dt><dfn class="dfn-paneled css" data-dfn-for="logical-page-selector" data-dfn-type="value" data-export id="valdef-logical-page-selector-verso">:verso</dfn> <dd> Equivalent to ':left' in left-to-right page progressions and ':right' in right-to-left page progressions. </dl> The flow-relative page selectors have specificity equal to the ':left' and ':right' page selectors. <h2 class="heading settled" data-level="4" id="box">4. Flow-Relative Box Model Properties<a class="self-link" href="#box"></a></h2> For many formatting effects, the axis or direction affected is encoded in the property name rather than in its value. The type of directional or axis mapping (<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑦">flow-relative</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical②">physical</a>) of each such property is called its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mapping-logic">mapping logic</dfn>. Historically, all properties have been encoded in physical terms; this specification introduces new CSS properties that are flow-relative equivalents of CSS2’s physical box model properties. Note: Newer CSS specifications are expected in most cases to define <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑨">flow-relative</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-relative" id="ref-for-line-relative②">line-relative</a> properties instead of or in addition to any <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical⑤">physical</a> ones. Each set of parallel <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①⓪">flow-relative</a> properties and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical⑥">physical</a> properties (ignoring <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand</a> properties) related by setting equivalent styles on the various sides or dimensions of a box, forms a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="logical-property-group">logical property group</dfn>. For example, the padding-* properties form a single <a data-link-type="dfn" href="#logical-property-group" id="ref-for-logical-property-group">logical property group</a>, the margin-* properties form a separate logical property group, the border-*-style properties form another logical property group, etc. (Each <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand">longhand property</a> can belong to at most one logical property group.) Within each <a data-link-type="dfn" href="#logical-property-group" id="ref-for-logical-property-group④">logical property group</a>, corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①①">flow-relative</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical⑦">physical</a> properties are paired using the element’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑤">writing mode</a>. Although the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value">specified value</a> of each property remains distinct, paired properties share a computed value. This shared value is determined by <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-6/#cascade" id="ref-for-cascade">cascading</a> the declarations of both properties together as one; in other words, the computed value of both properties in the pair is derived from the specified value of the property declared with higher priority in the CSS cascade. <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">[CSS-CASCADE-3]</a> Note that this requires implementations to maintain relative order of declarations within a CSS declaration block, which was not previously required for CSS cascading. It also requires that <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation③">text-orientation</a> be computed as a prerequisite for cascading together the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①②">flow-relative</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical⑧">physical</a> declarations of a <a data-link-type="dfn" href="#logical-property-group" id="ref-for-logical-property-group⑤">logical property group</a> to find their <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed values</a>. <div class="example" id="example-0ead529c"> <a class="self-link" href="#example-0ead529c"></a> For example, given the following rule: <pre class="lang-css highlight">p <c- p>{</c-> <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-><c- p>;</c-> <c- k>margin-left</c-><c- p>:</c-> <c- m>2</c-><c- k>px</c-><c- p>;</c-> <c- k>margin-inline-end</c-><c- p>:</c-> <c- m>3</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> </pre> In a paragraph with computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode③">writing-mode</a> being <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> and computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction③">direction</a> being <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a>, the computed value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> is 2px, since for that writing-mode and direction, <a class="property css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start">margin-inline-start</a> and margin-left share a computed value, and the declaration of margin-left is after the declaration of margin-inline-start. However, if the computed direction were instead <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a>, the computed value of margin-left is 3px, since <a class="property css" data-link-type="property" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end">margin-inline-end</a> and margin-left share a computed value, and the declaration of margin-inline-end is after the declaration of margin-left. </div> <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> APIs that return computed values (such as <code>getComputedStyle()</code>) must return the same value for each individual property in such a pair. Note: Depending on the element’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑥">writing mode</a> for mapping every <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①③">flow-relative</a> property to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical⑨">physical</a> equivalent simplifies the cascading calculations and gives a straightforward model for authors to reason about. However, it is problematic in many cases, see for example <a href="https://www.w3.org/mid/20161108202634.GA7235@mail.internode.on.net">this discussion</a>. Authors may need to use nested elements to get the correct mapping behavior when changing an element’s writing mode from its parent. Inheritance of each property is from its corresponding property on the parent. For example, although the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> margin of an<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl①">rtl</a> box is its right margin, <a class="property css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start②">margin-inline-start</a> on this box will inherit the margin-inline-start of an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a> parent even though that happens to be the parent’s left margin. Unless otherwise specified, <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand properties</a> that encompass both logical and physical longhands (such as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-cascade-5/#propdef-all" id="ref-for-propdef-all">all</a> shorthand) set their physical longhands last. For example, all: inherit will set all of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin①">margin</a> properties to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a>, but since the physical longhands are set last, the child’s margins will inherit from their physical counterparts in the parent. <h3 class="heading settled" data-level="4.1" id="dimension-properties">4.1. Logical Height and Logical Width: the <a class="property css" data-link-type="property" href="#propdef-block-size" id="ref-for-propdef-block-size">block-size</a>/<a class="property css" data-link-type="property" href="#propdef-inline-size" id="ref-for-propdef-inline-size">inline-size</a>, <a class="property css" data-link-type="property" href="#propdef-min-block-size" id="ref-for-propdef-min-block-size">min-block-size</a>/<a class="property css" data-link-type="property" href="#propdef-min-inline-size" id="ref-for-propdef-min-inline-size">min-inline-size</a>, and <a class="property css" data-link-type="property" href="#propdef-max-block-size" id="ref-for-propdef-max-block-size">max-block-size</a>/<a class="property css" data-link-type="property" href="#propdef-max-inline-size" id="ref-for-propdef-max-inline-size">max-inline-size</a> properties<a class="self-link" href="#dimension-properties"></a></h3> <table class="def propdef" data-link-for-hint="block-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-block-size">block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inline-size">inline-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width"><'width'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①">width</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②">width</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property">size</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height②">height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width③">width</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑤">writing-mode</a>. <table class="def propdef" data-link-for-hint="min-block-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-min-block-size">min-block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-min-inline-size">min-inline-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width"><'min-width'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height③">height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width④">width</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width①">min-width</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property">min-size</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-height" id="ref-for-propdef-min-height①">min-height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width②">min-width</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑥">writing-mode</a>. <table class="def propdef" data-link-for-hint="max-block-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-max-block-size">max-block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-max-inline-size">max-inline-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width"><'max-width'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height④">height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑤">width</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-height" id="ref-for-propdef-max-height">max-height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width①">max-width</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property">max-size</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-height" id="ref-for-propdef-max-height①">max-height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width②">max-width</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑦">writing-mode</a>. <h3 class="heading settled" data-level="4.2" id="margin-properties">4.2. Flow-Relative Margins: the <a class="property css" data-link-type="property" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start">margin-block-start</a>, <a class="property css" data-link-type="property" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end">margin-block-end</a>, <a class="property css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start④">margin-inline-start</a>, <a class="property css" data-link-type="property" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end②">margin-inline-end</a> properties and <a class="property css" data-link-type="property" href="#propdef-margin-block" id="ref-for-propdef-margin-block">margin-block</a> and <a class="property css" data-link-type="property" href="#propdef-margin-inline" id="ref-for-propdef-margin-inline">margin-inline</a> shorthands<a class="self-link" href="#margin-properties"></a></h3> <table class="def propdef" data-link-for-hint="margin-block-start"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block-start">margin-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block-end">margin-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline-start">margin-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline-end">margin-inline-end</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top"><'margin-top'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding margin-* properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin②">margin</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left⑥">margin-left</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑧">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑥">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation④">text-orientation</a>. <table class="def propdef" data-link-for-hint="margin-block"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block">margin-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline">margin-inline</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top③"><'margin-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property②">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start①">margin-block-start</a> & <a class="property css" data-link-type="property" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end①">margin-block-end</a> and <a class="property css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start⑤">margin-inline-start</a> & <a class="property css" data-link-type="property" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end③">margin-inline-end</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start">start</a> edge style, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end">end</a> edge style. If only one value is given, it applies to both the start and end edges. <h3 class="heading settled" data-level="4.3" id="position-properties">4.3. Flow-Relative Offsets: the <a class="property css" data-link-type="property" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start">inset-block-start</a>, <a class="property css" data-link-type="property" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end">inset-block-end</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start">inset-inline-start</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end">inset-inline-end</a> properties and <a class="property css" data-link-type="property" href="#propdef-inset-block" id="ref-for-propdef-inset-block">inset-block</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline">inset-inline</a>, and <a class="property css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset">inset</a> shorthands<a class="self-link" href="#position-properties"></a></h3> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left②">left</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right②">right</a> physical properties, their <a class="property css" data-link-type="property" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start①">inset-block-start</a>, <a class="property css" data-link-type="property" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end①">inset-block-end</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start①">inset-inline-start</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end①">inset-inline-end</a> flow-relative correspondents, and the <a class="property css" data-link-type="property" href="#propdef-inset-block" id="ref-for-propdef-inset-block①">inset-block</a>, <a class="property css" data-link-type="property" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline①">inset-inline</a>, and <a class="property css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset①">inset</a> shorthands, are collectively known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inset-properties">inset properties</dfn>. <table class="def propdef" data-link-for-hint="inset-block-start"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block-start">inset-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block-end">inset-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline-start">inset-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline-end">inset-inline-end</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top①"><'top'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>positioned elements <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top②">top</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right③">right</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom①">bottom</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left③">left</a> properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset②">inset</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top③">top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom②">bottom</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left④">left</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right④">right</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑨">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑦">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑤">text-orientation</a>. <table class="def propdef" data-link-for-hint="inset-block"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block">inset-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline">inset-inline</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top④"><'top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property③">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start②">inset-block-start</a> & <a class="property css" data-link-type="property" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end②">inset-block-end</a> and <a class="property css" data-link-type="property" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start②">inset-inline-start</a> & <a class="property css" data-link-type="property" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end②">inset-inline-end</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start②">start</a> edge style, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end②">end</a> edge style. If only one value is given, it applies to both the start and end edges. <table class="def propdef" data-link-for-hint="inset"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset">inset</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top⑤"><'top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property④">shorthand property</a> sets the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top⑥">top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right⑤">right</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom③">bottom</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left⑤">left</a> properties. Values are assigned to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand①">sub-properties</a> as for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin③">margin</a>. <h3 class="heading settled" data-level="4.4" id="padding-properties">4.4. Flow-Relative Padding: the <a class="property css" data-link-type="property" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start">padding-block-start</a>, <a class="property css" data-link-type="property" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end">padding-block-end</a>, <a class="property css" data-link-type="property" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start">padding-inline-start</a>, <a class="property css" data-link-type="property" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end">padding-inline-end</a> properties and <a class="property css" data-link-type="property" href="#propdef-padding-block" id="ref-for-propdef-padding-block">padding-block</a> and <a class="property css" data-link-type="property" href="#propdef-padding-inline" id="ref-for-propdef-padding-inline">padding-inline</a> shorthands<a class="self-link" href="#padding-properties"></a></h3> <table class="def propdef" data-link-for-hint="padding-block-start"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block-start">padding-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block-end">padding-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline-start">padding-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline-end">padding-inline-end</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top"><'padding-top'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top①">padding-top</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>As for the corresponding physical property <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding padding-* properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top②">padding-top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①⓪">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑧">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑥">text-orientation</a>. <table class="def propdef" data-link-for-hint="padding-block"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block">padding-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline">padding-inline</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top③"><'padding-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range③">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑤">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start①">padding-block-start</a> & <a class="property css" data-link-type="property" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end①">padding-block-end</a> and <a class="property css" data-link-type="property" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start①">padding-inline-start</a> & <a class="property css" data-link-type="property" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end①">padding-inline-end</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start④">start</a> edge style, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end④">end</a> edge style. If only one value is given, it applies to both the start and end edges. <h3 class="heading settled" data-level="4.5" id="border-properties">4.5. Flow-Relative Borders<a class="self-link" href="#border-properties"></a></h3> <h4 class="heading settled" data-level="4.5.1" id="border-width">4.5.1. Flow-Relative Border Widths: the <a class="property css" data-link-type="property" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width">border-block-start-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width">border-block-end-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width">border-inline-start-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width">border-inline-end-width</a> properties and <a class="property css" data-link-type="property" href="#propdef-border-block-width" id="ref-for-propdef-border-block-width">border-block-width</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-width" id="ref-for-propdef-border-inline-width">border-inline-width</a> shorthands<a class="self-link" href="#border-width"></a></h4> <table class="def propdef" data-link-for-hint="border-block-start-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-width">border-block-start-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-width">border-block-end-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-width">border-inline-start-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-width">border-inline-end-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width"><'border-top-width'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>medium <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width①">border-top-width</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding border-*-width properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width②">border-top-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①①">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑨">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑦">text-orientation</a>. <table class="def propdef" data-link-for-hint="border-block-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-width">border-block-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-width">border-inline-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width③"><'border-top-width'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range④">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑥">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width①">border-block-start-width</a> & <a class="property css" data-link-type="property" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width①">border-block-end-width</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width①">border-inline-start-width</a> & <a class="property css" data-link-type="property" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width①">border-inline-end-width</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start⑥">start</a> edge width, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end⑥">end</a> edge width. If only one value is given, it applies to both the start and end edges. <h4 class="heading settled" data-level="4.5.2" id="border-style">4.5.2. Flow-Relative Border Styles: the <a class="property css" data-link-type="property" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style">border-block-start-style</a>, <a class="property css" data-link-type="property" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style">border-block-end-style</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style">border-inline-start-style</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style">border-inline-end-style</a> properties and <a class="property css" data-link-type="property" href="#propdef-border-block-style" id="ref-for-propdef-border-block-style">border-block-style</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-style" id="ref-for-propdef-border-inline-style">border-inline-style</a> shorthands<a class="self-link" href="#border-style"></a></h4> <table class="def propdef" data-link-for-hint="border-block-start-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-style">border-block-start-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-style">border-block-end-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-style">border-inline-start-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-style">border-inline-end-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style"><'border-top-style'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style①">border-top-style</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding border-*-style properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style②">border-top-style</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style" id="ref-for-propdef-border-bottom-style">border-bottom-style</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style" id="ref-for-propdef-border-left-style">border-left-style</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style" id="ref-for-propdef-border-right-style">border-right-style</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①②">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①⓪">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑧">text-orientation</a>. <table class="def propdef" data-link-for-hint="border-block-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-style">border-block-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-style">border-inline-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style③"><'border-top-style'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑤">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑦">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style①">border-block-start-style</a> & <a class="property css" data-link-type="property" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style①">border-block-end-style</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style①">border-inline-start-style</a> & <a class="property css" data-link-type="property" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style①">border-inline-end-style</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start⑧">start</a> edge style, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end⑧">end</a> edge style. If only one value is given, it applies to both the start and end edges. <h4 class="heading settled" data-level="4.5.3" id="border-color">4.5.3. Flow-Relative Border Colors: the <a class="property css" data-link-type="property" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color">border-block-start-color</a>, <a class="property css" data-link-type="property" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color">border-block-end-color</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color">border-inline-start-color</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color">border-inline-end-color</a> properties and <a class="property css" data-link-type="property" href="#propdef-border-block-color" id="ref-for-propdef-border-block-color">border-block-color</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-color" id="ref-for-propdef-border-inline-color">border-inline-color</a> shorthands<a class="self-link" href="#border-color"></a></h4> <table class="def propdef" data-link-for-hint="border-block-start-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-color">border-block-start-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-color">border-block-end-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-color">border-inline-start-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-color">border-inline-end-color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color"><'border-top-color'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>currentcolor <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color①">border-top-color</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding border-*-color properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color②">border-top-color</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①③">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①①">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑨">text-orientation</a>. <table class="def propdef" data-link-for-hint="border-block-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-color">border-block-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-color">border-inline-color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color③"><'border-top-color'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑥">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑧">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color①">border-block-start-color</a> & <a class="property css" data-link-type="property" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color①">border-block-end-color</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color①">border-inline-start-color</a> & <a class="property css" data-link-type="property" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color①">border-inline-end-color</a>, respectively. The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-start" id="ref-for-css-start①⓪">start</a> edge color, and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#css-end" id="ref-for-css-end①⓪">end</a> edge color. If only one value is given, it applies to both the start and end edges. <h4 class="heading settled" data-level="4.5.4" id="border-shorthands">4.5.4. Flow-Relative Border Shorthands: the <a class="property css" data-link-type="property" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start">border-block-start</a>, <a class="property css" data-link-type="property" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end">border-block-end</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start">border-inline-start</a>, <a class="property css" data-link-type="property" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end">border-inline-end</a> properties and <a class="property css" data-link-type="property" href="#propdef-border-block" id="ref-for-propdef-border-block">border-block</a> and <a class="property css" data-link-type="property" href="#propdef-border-inline" id="ref-for-propdef-border-inline">border-inline</a> shorthands<a class="self-link" href="#border-shorthands"></a></h4> <table class="def propdef" data-link-for-hint="border-block-start"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start">border-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end">border-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start">border-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end">border-inline-end</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width④"><'border-top-width'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style④"><'border-top-style'></a> || <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-5/#typedef-color" id="ref-for-typedef-color"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top">border-top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom" id="ref-for-propdef-border-bottom">border-bottom</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left" id="ref-for-propdef-border-left">border-left</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right" id="ref-for-propdef-border-right">border-right</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①④">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①②">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation①⓪">text-orientation</a>. <table class="def propdef" data-link-for-hint="border-block"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block">border-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline">border-inline</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start①"><'border-block-start'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑨">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start②">border-block-start</a> & <a class="property css" data-link-type="property" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end①">border-block-end</a> or <a class="property css" data-link-type="property" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start①">border-inline-start</a> & <a class="property css" data-link-type="property" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end①">border-inline-end</a>, respectively, both to the same style. <h3 class="heading settled" data-level="4.6" id="border-radius-properties">4.6. Flow-Relative Corner Rounding: the <a class="property css" data-link-type="property" href="#propdef-border-start-start-radius" id="ref-for-propdef-border-start-start-radius">border-start-start-radius</a>, <a class="property css" data-link-type="property" href="#propdef-border-start-end-radius" id="ref-for-propdef-border-start-end-radius">border-start-end-radius</a>, <a class="property css" data-link-type="property" href="#propdef-border-end-start-radius" id="ref-for-propdef-border-end-start-radius">border-end-start-radius</a>, <a class="property css" data-link-type="property" href="#propdef-border-end-end-radius" id="ref-for-propdef-border-end-end-radius">border-end-end-radius</a> properties<a class="self-link" href="#border-radius-properties"></a></h3> <table class="def propdef" data-link-for-hint="border-start-start-radius"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-start-start-radius">border-start-start-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-start-end-radius">border-start-end-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-end-start-radius">border-end-start-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-end-end-radius">border-end-end-radius</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius"><'border-top-left-radius'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius①">border-top-left-radius</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius②">border-top-left-radius</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>Same as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius③">border-top-left-radius</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Same as corresponding physical border-*-radius properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> </table> These properties correspond to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius④">border-top-left-radius</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius" id="ref-for-propdef-border-bottom-left-radius">border-bottom-left-radius</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius" id="ref-for-propdef-border-top-right-radius">border-top-right-radius</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius" id="ref-for-propdef-border-bottom-right-radius">border-bottom-right-radius</a> properties. The mapping depends on the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑤">writing-mode</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①③">direction</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation①①">text-orientation</a>, with the first start/end giving the block axis side, and the second the inline-axis side (i.e. patterned as 'border-<var>block</var>-<var>inline</var>-radius'). <h3 class="heading settled" data-level="4.7" id="logical-shorthand-keyword">4.7. Four-Directional Shorthand Properties: the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin④">margin</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding①">padding</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①">border-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style①">border-style</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color①">border-color</a> shorthands<a class="self-link" href="#logical-shorthand-keyword"></a></h3> The shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the <dfn class="dfn-paneled css" data-dfn-for="margin, padding, border-color, border-style, border-width" data-dfn-type="value" data-export id="valdef-margin-logical">logical</dfn> keyword at the beginning of the property value to indicate that the values map to the flow-relative properties instead of the physical ones. <a class="self-link" href="#issue-cfb9f389"></a> The proposed syntax for this feature is <a href="https://github.com/w3c/csswg-drafts/issues/1282">under discussion</a> and is almost guaranteed to change from what is described here. This section remains in the draft to promote discussion of alternatives, to document the affected properties, and to specify the expected impact on the interpretation of whatever syntactic switch is ultimately chosen. The following <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> shorthand properties accept the <a class="css" data-link-type="maybe" href="#valdef-margin-logical" id="ref-for-valdef-margin-logical">logical</a> keyword: <ul> <li><a class="property css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset③">inset</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin⑤">margin</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding②">padding</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width②">border-width</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style②">border-style</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color②">border-color</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding" id="ref-for-propdef-scroll-padding">scroll-padding</a> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin" id="ref-for-propdef-scroll-margin">scroll-margin</a> </ul> The syntax for these properties is effectively changed by replacing <pre class="prod"><<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑦">{1,4}</a></pre> with <pre class="prod">logical<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑧">{1,4}</a></pre> When the <a class="css" data-link-type="maybe" href="#valdef-margin-logical" id="ref-for-valdef-margin-logical①">logical</a> keyword is present in the value, the values that follow are assigned to its flow-relative longhands as follows: <ul> <li>If only one value is set, the value applies to all four flow-relative <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand②">longhands</a>. <li>If two values are set, the first is for block-start and block-end, the second is for inline-start and inline-end. <li>If three values are set, the first is for block-start, the second is for inline-start and inline-end, and the third is for block-end. <li>If four values are set, they apply to the block-start, inline-start, block-end, and inline-end sides in that order. </ul> <div class="example" id="example-119016c9"> <a class="self-link" href="#example-119016c9"></a> In the following example, the two rules are equivalent: <pre class="lang-css highlight">blockquote <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> logical <c- m>1</c-><c- k>em</c-> <c- m>2</c-><c- k>em</c-> <c- m>3</c-><c- k>em</c-> <c- m>4</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> blockquote <c- p>{</c-> <c- k>margin-block-start</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>2</c-><c- k>em</c-><c- p>;</c-> <c- k>margin-block-end</c-><c- p>:</c-> <c- m>3</c-><c- k>em</c-><c- p>;</c-> <c- k>margin-inline-end</c-><c- p>:</c-> <c- m>4</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> </pre> </div> <h2 class="heading settled" data-level="5" id="acknowledgements">5. Acknowledgements<a class="self-link" href="#acknowledgements"></a></h2> Cameron McCormack, David Baron, Oriol Brufau, Shinyu Murakami, Tab Atkins <h2 class="heading settled" data-level="6" id="changes">6. Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/">previous Working Draft</a> include: <ul> <li>Miscellaneous minor clarifications </ul> Changes between the earlier Editors Drafts and the <a href="https://www.w3.org/TR/2017/WD-css-logical-1-20170518/">18 May 2017 First Public Working Draft</a> include: <ul> <li>Making all properties cascade using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑧">writing mode</a> specified on the element, not on its parent. <li>Making the ordering of longhands within <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin⑥">margin</a>-like shorthands put inline-start before inline-end. <li>Adding the *-inline and *-block shorthand forms for margins/borders/padding. <li>Renaming the offset-* properties to inset-* and marking an issue for discussion. <li>Adding an Introduction section. <li>Updating to current terminology of CSS Writing Modes. <li>Miscellaneous prose cleanup. </ul> <h2 class="no-num heading settled" id="privacy">Privacy Considerations<a class="self-link" href="#privacy"></a></h2> No new privacy considerations have been reported on this specification. <h2 class="no-num heading settled" id="security">Security Considerations<a class="self-link" href="#security"></a></h2> No new security considerations have been reported on this specification. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#propdef-block-size">block-size</a>, in § 4.1 <li><a href="#propdef-border-block">border-block</a>, in § 4.5.4 <li><a href="#propdef-border-block-color">border-block-color</a>, in § 4.5.3 <li><a href="#propdef-border-block-end">border-block-end</a>, in § 4.5.4 <li><a href="#propdef-border-block-end-color">border-block-end-color</a>, in § 4.5.3 <li><a href="#propdef-border-block-end-style">border-block-end-style</a>, in § 4.5.2 <li><a href="#propdef-border-block-end-width">border-block-end-width</a>, in § 4.5.1 <li><a href="#propdef-border-block-start">border-block-start</a>, in § 4.5.4 <li><a href="#propdef-border-block-start-color">border-block-start-color</a>, in § 4.5.3 <li><a href="#propdef-border-block-start-style">border-block-start-style</a>, in § 4.5.2 <li><a href="#propdef-border-block-start-width">border-block-start-width</a>, in § 4.5.1 <li><a href="#propdef-border-block-style">border-block-style</a>, in § 4.5.2 <li><a href="#propdef-border-block-width">border-block-width</a>, in § 4.5.1 <li><a href="#propdef-border-end-end-radius">border-end-end-radius</a>, in § 4.6 <li><a href="#propdef-border-end-start-radius">border-end-start-radius</a>, in § 4.6 <li><a href="#propdef-border-inline">border-inline</a>, in § 4.5.4 <li><a href="#propdef-border-inline-color">border-inline-color</a>, in § 4.5.3 <li><a href="#propdef-border-inline-end">border-inline-end</a>, in § 4.5.4 <li><a href="#propdef-border-inline-end-color">border-inline-end-color</a>, in § 4.5.3 <li><a href="#propdef-border-inline-end-style">border-inline-end-style</a>, in § 4.5.2 <li><a href="#propdef-border-inline-end-width">border-inline-end-width</a>, in § 4.5.1 <li><a href="#propdef-border-inline-start">border-inline-start</a>, in § 4.5.4 <li><a href="#propdef-border-inline-start-color">border-inline-start-color</a>, in § 4.5.3 <li><a href="#propdef-border-inline-start-style">border-inline-start-style</a>, in § 4.5.2 <li><a href="#propdef-border-inline-start-width">border-inline-start-width</a>, in § 4.5.1 <li><a href="#propdef-border-inline-style">border-inline-style</a>, in § 4.5.2 <li><a href="#propdef-border-inline-width">border-inline-width</a>, in § 4.5.1 <li><a href="#propdef-border-start-end-radius">border-start-end-radius</a>, in § 4.6 <li><a href="#propdef-border-start-start-radius">border-start-start-radius</a>, in § 4.6 <li><a href="#directional-keyword">directional keyword</a>, in § 2 <li><a href="#propdef-inline-size">inline-size</a>, in § 4.1 <li><a href="#propdef-inset">inset</a>, in § 4.3 <li><a href="#propdef-inset-block">inset-block</a>, in § 4.3 <li><a href="#propdef-inset-block-end">inset-block-end</a>, in § 4.3 <li><a href="#propdef-inset-block-start">inset-block-start</a>, in § 4.3 <li><a href="#propdef-inset-inline">inset-inline</a>, in § 4.3 <li><a href="#propdef-inset-inline-end">inset-inline-end</a>, in § 4.3 <li><a href="#propdef-inset-inline-start">inset-inline-start</a>, in § 4.3 <li><a href="#inset-properties">inset properties</a>, in § 4.3 <li><a href="#valdef-margin-logical">logical</a>, in § 4.7 <li><a href="#logical-property-group">logical property group</a>, in § 4 <li><a href="#mapping-logic">mapping logic</a>, in § 4 <li><a href="#propdef-margin-block">margin-block</a>, in § 4.2 <li><a href="#propdef-margin-block-end">margin-block-end</a>, in § 4.2 <li><a href="#propdef-margin-block-start">margin-block-start</a>, in § 4.2 <li><a href="#propdef-margin-inline">margin-inline</a>, in § 4.2 <li><a href="#propdef-margin-inline-end">margin-inline-end</a>, in § 4.2 <li><a href="#propdef-margin-inline-start">margin-inline-start</a>, in § 4.2 <li><a href="#propdef-max-block-size">max-block-size</a>, in § 4.1 <li><a href="#propdef-max-inline-size">max-inline-size</a>, in § 4.1 <li><a href="#propdef-min-block-size">min-block-size</a>, in § 4.1 <li><a href="#propdef-min-inline-size">min-inline-size</a>, in § 4.1 <li><a href="#propdef-padding-block">padding-block</a>, in § 4.4 <li><a href="#propdef-padding-block-end">padding-block-end</a>, in § 4.4 <li><a href="#propdef-padding-block-start">padding-block-start</a>, in § 4.4 <li><a href="#propdef-padding-inline">padding-inline</a>, in § 4.4 <li><a href="#propdef-padding-inline-end">padding-inline-end</a>, in § 4.4 <li><a href="#propdef-padding-inline-start">padding-inline-start</a>, in § 4.4 <li><a href="#valdef-logical-page-selector-recto">:recto</a>, in § 3 <li><a href="#valdef-logical-page-recto">recto</a>, in § 3 <li><a href="#valdef-logical-page-selector-verso">:verso</a>, in § 3 <li><a href="#valdef-logical-page-verso">verso</a>, in § 3 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>border-bottom <li>border-bottom-color <li>border-bottom-left-radius <li>border-bottom-right-radius <li>border-bottom-style <li>border-bottom-width <li>border-color <li>border-left <li>border-left-color <li>border-left-style <li>border-left-width <li>border-radius <li>border-right <li>border-right-color <li>border-right-style <li>border-right-width <li>border-style <li>border-top <li>border-top-color <li>border-top-left-radius <li>border-top-right-radius <li>border-top-style <li>border-top-width <li>border-width </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin <li>margin-bottom <li>margin-left <li>margin-right <li>margin-top <li>padding <li>padding-bottom <li>padding-left <li>padding-right <li>padding-top </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>all <li>computed value <li>inherit <li>longhand <li>longhand property <li>shorthand <li>shorthand property <li>specified value <li>sub-property <li>used value </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-6]</a> defines the following terms: <ul> <li>cascade </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color> </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>containing block </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>bottom <li>left <li>right <li>top </ul> <li> <a data-link-type="biblio">[CSS-SCROLL-SNAP-1]</a> defines the following terms: <ul> <li>scroll-margin <li>scroll-padding </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[CSS-TABLES-3]</a> defines the following terms: <ul> <li>table wrapper box </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>? <li>CSS-wide keywords <li>{A,B} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction <li>end <li>start </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block-end <li>block-start <li>flow-relative <li>horizontal-tb <li>inline-start <li>line-relative <li>ltr <li>physical <li>rtl <li>text-orientation <li>writing mode <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>caption-side <li>max-height <li>max-width <li>min-height <li>min-width <li>page-break-after <li>page-break-before </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css-cascade-3">[CSS-CASCADE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-3/"><cite>CSS Cascading and Inheritance Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-3/">https://drafts.csswg.org/css-cascade-3/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-cascade-6">[CSS-CASCADE-6] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-6/"><cite>CSS Cascading and Inheritance Level 6</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-6/">https://drafts.csswg.org/css-cascade-6/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://drafts.csswg.org/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-5/">https://drafts.csswg.org/css-color-5/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1] <dd>Matt Rakow; et al. <a href="https://drafts.csswg.org/css-scroll-snap-1/"><cite>CSS Scroll Snap Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-scroll-snap-1/">https://drafts.csswg.org/css-scroll-snap-1/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-tables-3">[CSS-TABLES-3] <dd>François Remy; Greg Whitworth; David Baron. <a href="https://drafts.csswg.org/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-tables-3/">https://drafts.csswg.org/css-tables-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom">[CSSOM] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <th scope="col">Logical property group <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-block-size" id="ref-for-propdef-block-size①">block-size</a> <td><'width'> <td>auto <td>Same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as height, width <td>size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block" id="ref-for-propdef-border-block①">border-block</a> <td><'border-block-start'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-color" id="ref-for-propdef-border-block-color①">border-block-color</a> <td><'border-top-color'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end②">border-block-end</a> <td><'border-top-width'> || <'border-top-style'> || <color> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color②">border-block-end-color</a> <td><'border-top-color'> <td>currentcolor <td>Same as border-top-color <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-color properties <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style②">border-block-end-style</a> <td><'border-top-style'> <td>none <td>Same as border-top-style <td>no <td>n/a <td>discrete <td>per grammar <td>Same as corresponding border-*-style properties <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width②">border-block-end-width</a> <td><'border-top-width'> <td>medium <td>Same as border-top-width <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-width properties <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start③">border-block-start</a> <td><'border-top-width'> || <'border-top-style'> || <color> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color②">border-block-start-color</a> <td><'border-top-color'> <td>currentcolor <td>Same as border-top-color <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-color properties <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style②">border-block-start-style</a> <td><'border-top-style'> <td>none <td>Same as border-top-style <td>no <td>n/a <td>discrete <td>per grammar <td>Same as corresponding border-*-style properties <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width②">border-block-start-width</a> <td><'border-top-width'> <td>medium <td>Same as border-top-width <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-width properties <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-style" id="ref-for-propdef-border-block-style①">border-block-style</a> <td><'border-top-style'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-width" id="ref-for-propdef-border-block-width①">border-block-width</a> <td><'border-top-width'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-end-end-radius" id="ref-for-propdef-border-end-end-radius①">border-end-end-radius</a> <td><'border-top-left-radius'> <td>Same as border-top-left-radius <td>Same as border-top-left-radius <td>no <td>Same as border-top-left-radius <td>by computed value type <td>per grammar <td>Same as corresponding physical border-*-radius properties <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-end-start-radius" id="ref-for-propdef-border-end-start-radius①">border-end-start-radius</a> <td><'border-top-left-radius'> <td>Same as border-top-left-radius <td>Same as border-top-left-radius <td>no <td>Same as border-top-left-radius <td>by computed value type <td>per grammar <td>Same as corresponding physical border-*-radius properties <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline" id="ref-for-propdef-border-inline①">border-inline</a> <td><'border-block-start'> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-color" id="ref-for-propdef-border-inline-color①">border-inline-color</a> <td><'border-top-color'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end②">border-inline-end</a> <td><'border-top-width'> || <'border-top-style'> || <color> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color②">border-inline-end-color</a> <td><'border-top-color'> <td>currentcolor <td>Same as border-top-color <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-color properties <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style②">border-inline-end-style</a> <td><'border-top-style'> <td>none <td>Same as border-top-style <td>no <td>n/a <td>discrete <td>per grammar <td>Same as corresponding border-*-style properties <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width②">border-inline-end-width</a> <td><'border-top-width'> <td>medium <td>Same as border-top-width <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-width properties <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start②">border-inline-start</a> <td><'border-top-width'> || <'border-top-style'> || <color> <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color②">border-inline-start-color</a> <td><'border-top-color'> <td>currentcolor <td>Same as border-top-color <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-color properties <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style②">border-inline-start-style</a> <td><'border-top-style'> <td>none <td>Same as border-top-style <td>no <td>n/a <td>discrete <td>per grammar <td>Same as corresponding border-*-style properties <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width②">border-inline-start-width</a> <td><'border-top-width'> <td>medium <td>Same as border-top-width <td>no <td>n/a <td>by computed value type <td>per grammar <td>Same as corresponding border-*-width properties <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-style" id="ref-for-propdef-border-inline-style①">border-inline-style</a> <td><'border-top-style'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-width" id="ref-for-propdef-border-inline-width①">border-inline-width</a> <td><'border-top-width'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-start-end-radius" id="ref-for-propdef-border-start-end-radius①">border-start-end-radius</a> <td><'border-top-left-radius'> <td>Same as border-top-left-radius <td>Same as border-top-left-radius <td>no <td>Same as border-top-left-radius <td>by computed value type <td>per grammar <td>Same as corresponding physical border-*-radius properties <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-start-start-radius" id="ref-for-propdef-border-start-start-radius①">border-start-start-radius</a> <td><'border-top-left-radius'> <td>Same as border-top-left-radius <td>Same as border-top-left-radius <td>no <td>Same as border-top-left-radius <td>by computed value type <td>per grammar <td>Same as corresponding physical border-*-radius properties <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inline-size" id="ref-for-propdef-inline-size①">inline-size</a> <td><'width'> <td>auto <td>Same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as height, width <td>size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset④">inset</a> <td><'top'>{1,4} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block" id="ref-for-propdef-inset-block②">inset-block</a> <td><'top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end③">inset-block-end</a> <td><'top'> <td>auto <td>positioned elements <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding top/right/bottom/left properties <td>inset <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start③">inset-block-start</a> <td><'top'> <td>auto <td>positioned elements <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding top/right/bottom/left properties <td>inset <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline②">inset-inline</a> <td><'top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end③">inset-inline-end</a> <td><'top'> <td>auto <td>positioned elements <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding top/right/bottom/left properties <td>inset <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start③">inset-inline-start</a> <td><'top'> <td>auto <td>positioned elements <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding top/right/bottom/left properties <td>inset <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block" id="ref-for-propdef-margin-block①">margin-block</a> <td><'margin-top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end②">margin-block-end</a> <td><'margin-top'> <td>0 <td>Same as margin-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding margin-* properties <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start②">margin-block-start</a> <td><'margin-top'> <td>0 <td>Same as margin-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding margin-* properties <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline" id="ref-for-propdef-margin-inline①">margin-inline</a> <td><'margin-top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end④">margin-inline-end</a> <td><'margin-top'> <td>0 <td>Same as margin-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding margin-* properties <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start⑥">margin-inline-start</a> <td><'margin-top'> <td>0 <td>Same as margin-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding margin-* properties <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-block-size" id="ref-for-propdef-max-block-size①">max-block-size</a> <td><'max-width'> <td>none <td>same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as max-height, max-width <td>max-size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-inline-size" id="ref-for-propdef-max-inline-size①">max-inline-size</a> <td><'max-width'> <td>none <td>same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as max-height, max-width <td>max-size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-min-block-size" id="ref-for-propdef-min-block-size①">min-block-size</a> <td><'min-width'> <td>0 <td>same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as min-height, min-width <td>min-size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-min-inline-size" id="ref-for-propdef-min-inline-size①">min-inline-size</a> <td><'min-width'> <td>0 <td>same as height and width <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as min-height, min-width <td>min-size <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block" id="ref-for-propdef-padding-block①">padding-block</a> <td><'padding-top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end②">padding-block-end</a> <td><'padding-top'> <td>0 <td>Same as padding-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding padding-* properties <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start②">padding-block-start</a> <td><'padding-top'> <td>0 <td>Same as padding-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding padding-* properties <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline" id="ref-for-propdef-padding-inline①">padding-inline</a> <td><'padding-top'>{1,2} <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end②">padding-inline-end</a> <td><'padding-top'> <td>0 <td>Same as padding-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding padding-* properties <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start②">padding-inline-start</a> <td><'padding-top'> <td>0 <td>Same as padding-top <td>no <td>As for the corresponding physical property <td>by computed value type <td>per grammar <td>Same as corresponding padding-* properties <td>padding </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Things That Are Unstable Since implementation of parts of this module is effectively required for shipping an implementation of <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes</a> on the Web (in order to correctly implement the default HTML styles), the CSSWG resolved that the requisite features in <a href="#directional-keywords">§ 2 Flow-Relative Values: block-start, block-end, inline-start, inline-end</a> and <a href="#box">§ 4 Flow-Relative Box Model Properties</a> are approved for shipping. (See <a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0043.html">FPWD announcement</a> for additional background.) However, there are a few significant open issues: <ul> <li>The logical keyword on shorthands, because the name of the keyword may change or it may be replaced by some other syntactic marker. (This feature will be deferred from this level for further development if there is no clearly satisfactory mechanism proposed, see <a href="https://github.com/w3c/csswg-drafts/issues/1282">Issue 1282</a>.) <li>Whether flow-relative longhands inherit from their namesake on the parent, or are mapped to a physical property and inherit from that property. (See <a href="https://github.com/w3c/csswg-drafts/issues/3029">Issue 3029</a>.) <li>Whether shorthands like <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin">margin</a> expand to both sets of longhands, or only the ones that were set. (See <a href="https://github.com/w3c/csswg-drafts/issues/3030">Issue 3030</a>.) </ul> Comments, suggestions, and use cases are welcome on these issues. Please file them in GitHub, tweet them to @csswg, or send them to www-style@w3.org. <a class="issue-return" href="#issue-3d880eb1" title="Jump to section">↵</a> </div> <div class="issue"> The proposed syntax for this feature is <a href="https://github.com/w3c/csswg-drafts/issues/1282">under discussion</a> and is almost guaranteed to change from what is described here. This section remains in the draft to promote discussion of alternatives, to document the affected properties, and to specify the expected impact on the interpretation of whatever syntactic switch is ultimately chosen. <a class="issue-return" href="#issue-cfb9f389" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="page"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page" title="The @page at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The @page at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.">@page</a> In all current engines. <div class="support"> Firefox19+Safari13.1+Chrome2+ <hr> Opera6+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after" title="The page-break-after CSS property adjusts page breaks after the current element.">page-break-after</a> In all current engines. <div class="support"> Firefox1+Safari1.2+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before" title="The page-break-before CSS property adjusts page breaks before the current element.">page-break-before</a> In all current engines. <div class="support"> Firefox1+Safari1.2+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dimension-properties"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/block-size" title="The block-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.">block-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet5.0+Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size" title="The inline-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.">inline-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet5.0+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-block-color"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color" title="The border-block-color CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-color</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="border-color"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color" title="The border-block-end-color CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-end-color</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color" title="The border-block-start-color CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-start-color</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color" title="The border-inline-end-color CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-end-color</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color" title="The border-inline-start-color CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-start-color</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="border-style"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style" title="The border-block-end-style CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-end-style</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style" title="The border-block-start-style CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-start-style</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style" title="The border-inline-end-style CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-end-style</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style" title="The border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-start-style</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="border-width"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width" title="The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-end-width</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width" title="The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-start-width</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width" title="The border-inline-end-width CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-end-width</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width" title="The border-inline-start-width CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-start-width</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="border-shorthands"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end" title="The border-block-end CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.">border-block-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start" title="The border-block-start CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.">border-block-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end" title="The border-inline-end CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.">border-inline-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start" title="The border-inline-start CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.">border-inline-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-block-style"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style" title="The border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.">border-block-style</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-block-width"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width" title="The border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-block-width</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-block"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block" title="The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.">border-block</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="logical-shorthand-keyword"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color" title="The border-color shorthand CSS property sets the color of an element's border.">border-color</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView4+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="border-radius-properties"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius" title="The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.">border-end-end-radius</a> In all current engines. <div class="support"> Firefox66+Safari15+Chrome89+ <hr> Opera?Edge89+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius" title="The border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.">border-end-start-radius</a> In all current engines. <div class="support"> Firefox66+Safari15+Chrome89+ <hr> Opera?Edge89+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius" title="The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.">border-start-end-radius</a> In all current engines. <div class="support"> Firefox66+Safari15+Chrome89+ <hr> Opera?Edge89+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius" title="The border-start-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.">border-start-start-radius</a> In all current engines. <div class="support"> Firefox66+Safari15+Chrome89+ <hr> Opera?Edge89+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-inline-color"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color" title="The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-color</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-inline-style"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style" title="The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-style</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-inline-width"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width" title="The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.">border-inline-width</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-border-inline"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline" title="The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.">border-inline</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="caption-side"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side" title="The caption-side CSS property puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.">caption-side</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera4+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="float-clear"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clear" title="The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.">clear</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).">float</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="position-properties"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end" title="The inset-block-end CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.">inset-block-end</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start" title="The inset-block-start CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.">inset-block-start</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end" title="The inset-inline-end CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.">inset-inline-end</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start" title="The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.">inset-inline-start</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-inset-block"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block" title="The inset-block CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.">inset-block</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-inset-inline"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline" title="The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.">inset-inline</a> In all current engines. <div class="support"> Firefox63+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-inset"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset" title="The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.">inset</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="margin-properties"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end" title="The margin-block-end CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.">margin-block-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start" title="The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.">margin-block-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end" title="The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.">margin-inline-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari12.2+Chrome for Android?Android WebView87+Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start" title="The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.">margin-inline-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari12.2+Chrome for Android?Android WebView87+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-margin-block"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block" title="The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.">margin-block</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-margin-inline"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline" title="The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.">margin-inline</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-max-block-size"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size" title="The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. That is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width.">max-block-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet5.0+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-max-inline-size"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size" title="The max-inline-size CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.">max-inline-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-min-block-size"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size" title="The min-block-size CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.">min-block-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-min-inline-size"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size" title="The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.">min-inline-size</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome57+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="padding-properties"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end" title="The padding-block-end CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.">padding-block-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start" title="The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.">padding-block-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end" title="The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.">padding-inline-end</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari12.2+Chrome for Android?Android WebView87+Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start" title="The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.">padding-inline-start</a> In all current engines. <div class="support"> Firefox41+Safari12.1+Chrome69+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari12.2+Chrome for Android?Android WebView87+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-padding-block"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block" title="The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.">padding-block</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-padding-inline"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline" title="The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.">padding-inline</a> In all current engines. <div class="support"> Firefox66+Safari14.1+Chrome87+ <hr> Opera?Edge87+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-align"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align" title="The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.">text-align</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "00140718": {"dfnID":"00140718","dfnText":"margin-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"},{"id":"ref-for-propdef-margin-top\u2460"},{"id":"ref-for-propdef-margin-top\u2461"},{"id":"ref-for-propdef-margin-top\u2462"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "06bc643d": {"dfnID":"06bc643d","dfnText":"rtl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-rtl"},{"id":"ref-for-valdef-direction-rtl\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl"}, "08011fc6": {"dfnID":"08011fc6","dfnText":"scroll-margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-margin"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"}, "1370dad0": {"dfnID":"1370dad0","dfnText":"block-start","external":true,"refSections":[{"refs":[{"id":"ref-for-block-start"}],"title":"2.1. \nLogical Values for the caption-side Property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-start"}, "1548047a": {"dfnID":"1548047a","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-color"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "17b2caf5": {"dfnID":"17b2caf5","dfnText":"border-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right"}, "1a947799": {"dfnID":"1a947799","dfnText":"border-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left"}, "1cf918c1": {"dfnID":"1cf918c1","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"},{"id":"ref-for-specified-value\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "24c4db74": {"dfnID":"24c4db74","dfnText":"border-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "280c9a03": {"dfnID":"280c9a03","dfnText":"border-bottom-right-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-right-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius"}, "31ccd1a9": {"dfnID":"31ccd1a9","dfnText":"longhand property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-longhand\u2460"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-longhand\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "37c3d179": {"dfnID":"37c3d179","dfnText":"block-end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"}],"title":"2.1. \nLogical Values for the caption-side Property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "37c6bd4e": {"dfnID":"37c6bd4e","dfnText":"padding-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-right"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-right"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"},{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461"},{"id":"ref-for-propdef-writing-mode\u2462"},{"id":"ref-for-propdef-writing-mode\u2463"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2464"},{"id":"ref-for-propdef-writing-mode\u2465"},{"id":"ref-for-propdef-writing-mode\u2466"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2467"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2468"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u24ea"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2460"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2461"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2462"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2463"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460\u2464"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3bd4bbe9": {"dfnID":"3bd4bbe9","dfnText":"text-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"},{"id":"ref-for-propdef-text-orientation\u2460"},{"id":"ref-for-propdef-text-orientation\u2461"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2462"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2463"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2464"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2465"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2466"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2467"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2468"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u24ea"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460\u2460"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "411343bc": {"dfnID":"411343bc","dfnText":"border-top-left-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-left-radius"},{"id":"ref-for-propdef-border-top-left-radius\u2460"},{"id":"ref-for-propdef-border-top-left-radius\u2461"},{"id":"ref-for-propdef-border-top-left-radius\u2462"},{"id":"ref-for-propdef-border-top-left-radius\u2463"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius"}, "42871fa3": {"dfnID":"42871fa3","dfnText":"border-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-propdef-border-style\u2460"},{"id":"ref-for-propdef-border-style\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"},{"id":"ref-for-propdef-text-align\u2460"}],"title":"2.3. \nFlow-Relative Values for the text-align Property"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "466b2ed9": {"dfnID":"466b2ed9","dfnText":"inline-start","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-start"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "48594205": {"dfnID":"48594205","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-css-start"},{"id":"ref-for-css-start\u2460"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-css-start\u2461"},{"id":"ref-for-css-start\u2462"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-css-start\u2463"},{"id":"ref-for-css-start\u2464"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-css-start\u2465"},{"id":"ref-for-css-start\u2466"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-css-start\u2467"},{"id":"ref-for-css-start\u2468"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-css-start\u2460\u24ea"},{"id":"ref-for-css-start\u2460\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-start"}, "49a5f65f": {"dfnID":"49a5f65f","dfnText":"padding-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-top"},{"id":"ref-for-propdef-padding-top\u2460"},{"id":"ref-for-propdef-padding-top\u2461"},{"id":"ref-for-propdef-padding-top\u2462"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-top"}, "4a16f115": {"dfnID":"4a16f115","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"},{"id":"ref-for-propdef-border-top-width\u2460"},{"id":"ref-for-propdef-border-top-width\u2461"},{"id":"ref-for-propdef-border-top-width\u2462"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-propdef-border-top-width\u2463"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "500f2c1d": {"dfnID":"500f2c1d","dfnText":"border-top-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-color"},{"id":"ref-for-propdef-border-top-color\u2460"},{"id":"ref-for-propdef-border-top-color\u2461"},{"id":"ref-for-propdef-border-top-color\u2462"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "56177fad": {"dfnID":"56177fad","dfnText":"shorthand","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"},{"id":"ref-for-shorthand-property\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2462"},{"id":"ref-for-shorthand-property\u2463"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2464"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2465"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2466"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2467"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2468"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"},{"id":"ref-for-propdef-direction\u2460"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-direction\u2461"},{"id":"ref-for-propdef-direction\u2462"},{"id":"ref-for-propdef-direction\u2463"},{"id":"ref-for-propdef-direction\u2464"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-direction\u2465"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2466"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2467"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2468"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u24ea"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2461"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"},{"refs":[{"id":"ref-for-propdef-direction\u2460\u2462"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5c4b7db5": {"dfnID":"5c4b7db5","dfnText":"border-bottom-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color"}, "5ddc23c6": {"dfnID":"5ddc23c6","dfnText":"page-break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-after"}],"title":"3. \nFlow-Relative Page Classifications"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "5eff29c1": {"dfnID":"5eff29c1","dfnText":"flow-relative","external":true,"refSections":[{"refs":[{"id":"ref-for-flow-relative"},{"id":"ref-for-flow-relative\u2460"},{"id":"ref-for-flow-relative\u2461"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-flow-relative\u2462"},{"id":"ref-for-flow-relative\u2463"},{"id":"ref-for-flow-relative\u2464"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"},{"refs":[{"id":"ref-for-flow-relative\u2465"}],"title":"2.2. \nFlow-Relative Values for the float and clear Properties"},{"refs":[{"id":"ref-for-flow-relative\u2466"},{"id":"ref-for-flow-relative\u2467"},{"id":"ref-for-flow-relative\u2468"},{"id":"ref-for-flow-relative\u2460\u24ea"},{"id":"ref-for-flow-relative\u2460\u2460"},{"id":"ref-for-flow-relative\u2460\u2461"},{"id":"ref-for-flow-relative\u2460\u2462"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#flow-relative"}, "5f1a81e7": {"dfnID":"5f1a81e7","dfnText":"border-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius"}, "653787eb": {"dfnID":"653787eb","dfnText":"line-relative","external":true,"refSections":[{"refs":[{"id":"ref-for-line-relative"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"},{"refs":[{"id":"ref-for-line-relative\u2460"}],"title":"2.1. \nLogical Values for the caption-side Property"},{"refs":[{"id":"ref-for-line-relative\u2461"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-relative"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"},{"id":"ref-for-propdef-height\u2460"},{"id":"ref-for-propdef-height\u2461"},{"id":"ref-for-propdef-height\u2462"},{"id":"ref-for-propdef-height\u2463"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "688eb8fe": {"dfnID":"688eb8fe","dfnText":"max-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-width"},{"id":"ref-for-propdef-max-width\u2460"},{"id":"ref-for-propdef-max-width\u2461"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css2/#propdef-max-width"}, "6d39e00f": {"dfnID":"6d39e00f","dfnText":"caption-side","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-caption-side"},{"id":"ref-for-propdef-caption-side\u2460"},{"id":"ref-for-propdef-caption-side\u2461"}],"title":"2.1. \nLogical Values for the caption-side Property"}],"url":"https://drafts.csswg.org/css2/#propdef-caption-side"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.1. \nLogical Values for the caption-side Property"},{"refs":[{"id":"ref-for-comb-one\u2460"}],"title":"2.2. \nFlow-Relative Values for the float and clear Properties"},{"refs":[{"id":"ref-for-comb-one\u2461"}],"title":"2.3. \nFlow-Relative Values for the text-align Property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "73759fff": {"dfnID":"73759fff","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-propdef-border-color\u2460"},{"id":"ref-for-propdef-border-color\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "76207212": {"dfnID":"76207212","dfnText":"padding-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-left"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-left"}, "7f0d729a": {"dfnID":"7f0d729a","dfnText":"ltr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-direction-ltr"},{"id":"ref-for-valdef-direction-ltr\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr"}, "8000726e": {"dfnID":"8000726e","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"},{"id":"ref-for-propdef-width\u2460"},{"id":"ref-for-propdef-width\u2461"},{"id":"ref-for-propdef-width\u2462"},{"id":"ref-for-propdef-width\u2463"},{"id":"ref-for-propdef-width\u2464"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8b78f470": {"dfnID":"8b78f470","dfnText":"border-right-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style"}, "8ca0c013": {"dfnID":"8ca0c013","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"},{"id":"ref-for-shorthand-property\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2462"},{"id":"ref-for-shorthand-property\u2463"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2464"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2465"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2466"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2467"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-shorthand-property\u2468"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "8f568cb6": {"dfnID":"8f568cb6","dfnText":"page-break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-before"}],"title":"3. \nFlow-Relative Page Classifications"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "9112c920": {"dfnID":"9112c920","dfnText":"border-left-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color"}, "938ba280": {"dfnID":"938ba280","dfnText":"{A,B}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2460"},{"id":"ref-for-mult-num-range\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2462"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2463"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2464"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2465"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"},{"refs":[{"id":"ref-for-mult-num-range\u2466"},{"id":"ref-for-mult-num-range\u2467"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "989f9ee6": {"dfnID":"989f9ee6","dfnText":"border-right-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "994d0e36": {"dfnID":"994d0e36","dfnText":"table wrapper box","external":true,"refSections":[{"refs":[{"id":"ref-for-table-wrapper-box"}],"title":"2.1. \nLogical Values for the caption-side Property"}],"url":"https://drafts.csswg.org/css-tables-3/#table-wrapper-box"}, "99775498": {"dfnID":"99775498","dfnText":"border-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-computed-value\u2460"},{"id":"ref-for-computed-value\u2461"},{"id":"ref-for-computed-value\u2462"},{"id":"ref-for-computed-value\u2463"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9d7987cb": {"dfnID":"9d7987cb","dfnText":"border-right-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color"}, "9e066e76": {"dfnID":"9e066e76","dfnText":"longhand","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-longhand\u2460"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-longhand\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a4f9641f": {"dfnID":"a4f9641f","dfnText":"border-left-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style"}, "a58a3cd8": {"dfnID":"a58a3cd8","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"},{"id":"ref-for-propdef-bottom\u2460"},{"id":"ref-for-propdef-bottom\u2461"},{"id":"ref-for-propdef-bottom\u2462"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-writing-mode\u2460"},{"id":"ref-for-writing-mode\u2461"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"},{"refs":[{"id":"ref-for-writing-mode\u2462"}],"title":"2.1. \nLogical Values for the caption-side Property"},{"refs":[{"id":"ref-for-writing-mode\u2463"}],"title":"2.2. \nFlow-Relative Values for the float and clear Properties"},{"refs":[{"id":"ref-for-writing-mode\u2464"},{"id":"ref-for-writing-mode\u2465"},{"id":"ref-for-writing-mode\u2466"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-writing-mode\u2467"}],"title":"6. \nChanges"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "aa9d496e": {"dfnID":"aa9d496e","dfnText":"scroll-padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-padding"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"}, "aaf6abed": {"dfnID":"aaf6abed","dfnText":"margin-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"},{"id":"ref-for-propdef-margin-left\u2460"},{"id":"ref-for-propdef-margin-left\u2461"},{"id":"ref-for-propdef-margin-left\u2462"},{"id":"ref-for-propdef-margin-left\u2463"},{"id":"ref-for-propdef-margin-left\u2464"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-margin-left\u2465"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "ad065a5c": {"dfnID":"ad065a5c","dfnText":"margin-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "aec5d7d1": {"dfnID":"aec5d7d1","dfnText":"end","external":true,"refSections":[{"refs":[{"id":"ref-for-css-end"},{"id":"ref-for-css-end\u2460"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-css-end\u2461"},{"id":"ref-for-css-end\u2462"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-css-end\u2463"},{"id":"ref-for-css-end\u2464"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-css-end\u2465"},{"id":"ref-for-css-end\u2466"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-css-end\u2467"},{"id":"ref-for-css-end\u2468"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-css-end\u2460\u24ea"},{"id":"ref-for-css-end\u2460\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#css-end"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"},{"id":"ref-for-propdef-right\u2460"}],"title":"3. \nFlow-Relative Page Classifications"},{"refs":[{"id":"ref-for-propdef-right\u2461"},{"id":"ref-for-propdef-right\u2462"},{"id":"ref-for-propdef-right\u2463"},{"id":"ref-for-propdef-right\u2464"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b4da59cc": {"dfnID":"b4da59cc","dfnText":"horizontal-tb","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-horizontal-tb"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb"}, "b5418f3e": {"dfnID":"b5418f3e","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"},{"refs":[{"id":"ref-for-propdef-padding\u2460"},{"id":"ref-for-propdef-padding\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "bc81c39d": {"dfnID":"bc81c39d","dfnText":"border-bottom-left-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-left-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius"}, "c21450f8": {"dfnID":"c21450f8","dfnText":"sub-property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-longhand\u2460"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-longhand\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "c388d253": {"dfnID":"c388d253","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "c9ecad15": {"dfnID":"c9ecad15","dfnText":"border-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"},{"refs":[{"id":"ref-for-propdef-border-width\u2460"},{"id":"ref-for-propdef-border-width\u2461"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "ca62982f": {"dfnID":"ca62982f","dfnText":"padding-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-bottom"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-bottom"}, "cbfeec00": {"dfnID":"cbfeec00","dfnText":"margin-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "cecbe9cd": {"dfnID":"cecbe9cd","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-margin\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-margin\u2461"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"},{"refs":[{"id":"ref-for-propdef-margin\u2462"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-propdef-margin\u2463"},{"id":"ref-for-propdef-margin\u2464"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"},{"refs":[{"id":"ref-for-propdef-margin\u2465"}],"title":"6. \nChanges"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "d4858c02": {"dfnID":"d4858c02","dfnText":"min-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-width"},{"id":"ref-for-propdef-min-width\u2460"},{"id":"ref-for-propdef-min-width\u2461"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css2/#propdef-min-width"}, "d95397a7": {"dfnID":"d95397a7","dfnText":"all","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-all"},{"id":"ref-for-propdef-all\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#propdef-all"}, "d9c76793": {"dfnID":"d9c76793","dfnText":"physical","external":true,"refSections":[{"refs":[{"id":"ref-for-physical"},{"id":"ref-for-physical\u2460"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"},{"refs":[{"id":"ref-for-physical\u2461"},{"id":"ref-for-physical\u2462"},{"id":"ref-for-physical\u2463"},{"id":"ref-for-physical\u2464"},{"id":"ref-for-physical\u2465"},{"id":"ref-for-physical\u2466"},{"id":"ref-for-physical\u2467"},{"id":"ref-for-physical\u2468"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#physical"}, "dae07910": {"dfnID":"dae07910","dfnText":"border-top-right-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-right-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius"}, "db91c914": {"dfnID":"db91c914","dfnText":"min-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-height"},{"id":"ref-for-propdef-min-height\u2460"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css2/#propdef-min-height"}, "dd0f8cfb": {"dfnID":"dd0f8cfb","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "dd1ccb1e": {"dfnID":"dd1ccb1e","dfnText":"max-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-height"},{"id":"ref-for-propdef-max-height\u2460"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"https://drafts.csswg.org/css2/#propdef-max-height"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"},{"id":"ref-for-propdef-left\u2460"}],"title":"3. \nFlow-Relative Page Classifications"},{"refs":[{"id":"ref-for-propdef-left\u2461"},{"id":"ref-for-propdef-left\u2462"},{"id":"ref-for-propdef-left\u2463"},{"id":"ref-for-propdef-left\u2464"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "de6d76c2": {"dfnID":"de6d76c2","dfnText":"cascade","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade"},{"id":"ref-for-cascade\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"https://drafts.csswg.org/css-cascade-6/#cascade"}, "directional-keyword": {"dfnID":"directional-keyword","dfnText":"directional keyword","external":false,"refSections":[{"refs":[{"id":"ref-for-directional-keyword"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"}],"url":"#directional-keyword"}, "e1483d91": {"dfnID":"e1483d91","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"},{"id":"ref-for-propdef-top\u2460"},{"id":"ref-for-propdef-top\u2461"},{"id":"ref-for-propdef-top\u2462"},{"id":"ref-for-propdef-top\u2463"},{"id":"ref-for-propdef-top\u2464"},{"id":"ref-for-propdef-top\u2465"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "e4039478": {"dfnID":"e4039478","dfnText":"border-top-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-style"},{"id":"ref-for-propdef-border-top-style\u2460"},{"id":"ref-for-propdef-border-top-style\u2461"},{"id":"ref-for-propdef-border-top-style\u2462"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"},{"refs":[{"id":"ref-for-propdef-border-top-style\u2463"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"2. \nFlow-Relative Values: block-start, block-end, inline-start, inline-end"},{"refs":[{"id":"ref-for-containing-block\u2460"}],"title":"2.1. \nLogical Values for the caption-side Property"},{"refs":[{"id":"ref-for-containing-block\u2461"}],"title":"2.2. \nFlow-Relative Values for the float and clear Properties"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "ebfaf864": {"dfnID":"ebfaf864","dfnText":"border-bottom-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style"}, "inset-properties": {"dfnID":"inset-properties","dfnText":"inset properties","external":false,"refSections":[],"url":"#inset-properties"}, "logical-property-group": {"dfnID":"logical-property-group","dfnText":"logical property group","external":false,"refSections":[{"refs":[{"id":"ref-for-logical-property-group"},{"id":"ref-for-logical-property-group\u2460"},{"id":"ref-for-logical-property-group\u2461"},{"id":"ref-for-logical-property-group\u2462"},{"id":"ref-for-logical-property-group\u2463"},{"id":"ref-for-logical-property-group\u2464"}],"title":"4. \nFlow-Relative Box Model Properties"}],"url":"#logical-property-group"}, "mapping-logic": {"dfnID":"mapping-logic","dfnText":"mapping logic","external":false,"refSections":[],"url":"#mapping-logic"}, "propdef-block-size": {"dfnID":"propdef-block-size","dfnText":"block-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-block-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-block-size"}, "propdef-border-block": {"dfnID":"propdef-border-block","dfnText":"border-block","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-block"}, "propdef-border-block-color": {"dfnID":"propdef-border-block-color","dfnText":"border-block-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-block-color"}, "propdef-border-block-end": {"dfnID":"propdef-border-block-end","dfnText":"border-block-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-end"},{"id":"ref-for-propdef-border-block-end\u2460"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-block-end"}, "propdef-border-block-end-color": {"dfnID":"propdef-border-block-end-color","dfnText":"border-block-end-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-end-color"},{"id":"ref-for-propdef-border-block-end-color\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-block-end-color"}, "propdef-border-block-end-style": {"dfnID":"propdef-border-block-end-style","dfnText":"border-block-end-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-end-style"},{"id":"ref-for-propdef-border-block-end-style\u2460"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-block-end-style"}, "propdef-border-block-end-width": {"dfnID":"propdef-border-block-end-width","dfnText":"border-block-end-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-end-width"},{"id":"ref-for-propdef-border-block-end-width\u2460"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-block-end-width"}, "propdef-border-block-start": {"dfnID":"propdef-border-block-start","dfnText":"border-block-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-start"},{"id":"ref-for-propdef-border-block-start\u2460"},{"id":"ref-for-propdef-border-block-start\u2461"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-block-start"}, "propdef-border-block-start-color": {"dfnID":"propdef-border-block-start-color","dfnText":"border-block-start-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-start-color"},{"id":"ref-for-propdef-border-block-start-color\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-block-start-color"}, "propdef-border-block-start-style": {"dfnID":"propdef-border-block-start-style","dfnText":"border-block-start-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-start-style"},{"id":"ref-for-propdef-border-block-start-style\u2460"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-block-start-style"}, "propdef-border-block-start-width": {"dfnID":"propdef-border-block-start-width","dfnText":"border-block-start-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-start-width"},{"id":"ref-for-propdef-border-block-start-width\u2460"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-block-start-width"}, "propdef-border-block-style": {"dfnID":"propdef-border-block-style","dfnText":"border-block-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-block-style"}, "propdef-border-block-width": {"dfnID":"propdef-border-block-width","dfnText":"border-block-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-block-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-block-width"}, "propdef-border-end-end-radius": {"dfnID":"propdef-border-end-end-radius","dfnText":"border-end-end-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-end-end-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"#propdef-border-end-end-radius"}, "propdef-border-end-start-radius": {"dfnID":"propdef-border-end-start-radius","dfnText":"border-end-start-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-end-start-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"#propdef-border-end-start-radius"}, "propdef-border-inline": {"dfnID":"propdef-border-inline","dfnText":"border-inline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-inline"}, "propdef-border-inline-color": {"dfnID":"propdef-border-inline-color","dfnText":"border-inline-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-color"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-inline-color"}, "propdef-border-inline-end": {"dfnID":"propdef-border-inline-end","dfnText":"border-inline-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-end"},{"id":"ref-for-propdef-border-inline-end\u2460"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-inline-end"}, "propdef-border-inline-end-color": {"dfnID":"propdef-border-inline-end-color","dfnText":"border-inline-end-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-end-color"},{"id":"ref-for-propdef-border-inline-end-color\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-inline-end-color"}, "propdef-border-inline-end-style": {"dfnID":"propdef-border-inline-end-style","dfnText":"border-inline-end-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-end-style"},{"id":"ref-for-propdef-border-inline-end-style\u2460"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-inline-end-style"}, "propdef-border-inline-end-width": {"dfnID":"propdef-border-inline-end-width","dfnText":"border-inline-end-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-end-width"},{"id":"ref-for-propdef-border-inline-end-width\u2460"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-inline-end-width"}, "propdef-border-inline-start": {"dfnID":"propdef-border-inline-start","dfnText":"border-inline-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-start"},{"id":"ref-for-propdef-border-inline-start\u2460"}],"title":"4.5.4. \nFlow-Relative Border Shorthands:\nthe border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands"}],"url":"#propdef-border-inline-start"}, "propdef-border-inline-start-color": {"dfnID":"propdef-border-inline-start-color","dfnText":"border-inline-start-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-start-color"},{"id":"ref-for-propdef-border-inline-start-color\u2460"}],"title":"4.5.3. \nFlow-Relative Border Colors:\nthe border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands"}],"url":"#propdef-border-inline-start-color"}, "propdef-border-inline-start-style": {"dfnID":"propdef-border-inline-start-style","dfnText":"border-inline-start-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-start-style"},{"id":"ref-for-propdef-border-inline-start-style\u2460"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-inline-start-style"}, "propdef-border-inline-start-width": {"dfnID":"propdef-border-inline-start-width","dfnText":"border-inline-start-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-start-width"},{"id":"ref-for-propdef-border-inline-start-width\u2460"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-inline-start-width"}, "propdef-border-inline-style": {"dfnID":"propdef-border-inline-style","dfnText":"border-inline-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-style"}],"title":"4.5.2. \nFlow-Relative Border Styles:\nthe border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands"}],"url":"#propdef-border-inline-style"}, "propdef-border-inline-width": {"dfnID":"propdef-border-inline-width","dfnText":"border-inline-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-inline-width"}],"title":"4.5.1. \nFlow-Relative Border Widths:\nthe border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands"}],"url":"#propdef-border-inline-width"}, "propdef-border-start-end-radius": {"dfnID":"propdef-border-start-end-radius","dfnText":"border-start-end-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-start-end-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"#propdef-border-start-end-radius"}, "propdef-border-start-start-radius": {"dfnID":"propdef-border-start-start-radius","dfnText":"border-start-start-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-start-start-radius"}],"title":"4.6. \nFlow-Relative Corner Rounding:\nthe border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties"}],"url":"#propdef-border-start-start-radius"}, "propdef-inline-size": {"dfnID":"propdef-inline-size","dfnText":"inline-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inline-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-inline-size"}, "propdef-inset": {"dfnID":"propdef-inset","dfnText":"inset","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset"},{"id":"ref-for-propdef-inset\u2460"},{"id":"ref-for-propdef-inset\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"},{"refs":[{"id":"ref-for-propdef-inset\u2462"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"#propdef-inset"}, "propdef-inset-block": {"dfnID":"propdef-inset-block","dfnText":"inset-block","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-block"},{"id":"ref-for-propdef-inset-block\u2460"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-block"}, "propdef-inset-block-end": {"dfnID":"propdef-inset-block-end","dfnText":"inset-block-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-block-end"},{"id":"ref-for-propdef-inset-block-end\u2460"},{"id":"ref-for-propdef-inset-block-end\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-block-end"}, "propdef-inset-block-start": {"dfnID":"propdef-inset-block-start","dfnText":"inset-block-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-block-start"},{"id":"ref-for-propdef-inset-block-start\u2460"},{"id":"ref-for-propdef-inset-block-start\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-block-start"}, "propdef-inset-inline": {"dfnID":"propdef-inset-inline","dfnText":"inset-inline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-inline"},{"id":"ref-for-propdef-inset-inline\u2460"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-inline"}, "propdef-inset-inline-end": {"dfnID":"propdef-inset-inline-end","dfnText":"inset-inline-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-inline-end"},{"id":"ref-for-propdef-inset-inline-end\u2460"},{"id":"ref-for-propdef-inset-inline-end\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-inline-end"}, "propdef-inset-inline-start": {"dfnID":"propdef-inset-inline-start","dfnText":"inset-inline-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-inset-inline-start"},{"id":"ref-for-propdef-inset-inline-start\u2460"},{"id":"ref-for-propdef-inset-inline-start\u2461"}],"title":"4.3. \nFlow-Relative Offsets:\nthe inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands"}],"url":"#propdef-inset-inline-start"}, "propdef-margin-block": {"dfnID":"propdef-margin-block","dfnText":"margin-block","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-block"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-block"}, "propdef-margin-block-end": {"dfnID":"propdef-margin-block-end","dfnText":"margin-block-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-block-end"},{"id":"ref-for-propdef-margin-block-end\u2460"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-block-end"}, "propdef-margin-block-start": {"dfnID":"propdef-margin-block-start","dfnText":"margin-block-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-block-start"},{"id":"ref-for-propdef-margin-block-start\u2460"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-block-start"}, "propdef-margin-inline": {"dfnID":"propdef-margin-inline","dfnText":"margin-inline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-inline"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-inline"}, "propdef-margin-inline-end": {"dfnID":"propdef-margin-inline-end","dfnText":"margin-inline-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-inline-end"},{"id":"ref-for-propdef-margin-inline-end\u2460"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-margin-inline-end\u2461"},{"id":"ref-for-propdef-margin-inline-end\u2462"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-inline-end"}, "propdef-margin-inline-start": {"dfnID":"propdef-margin-inline-start","dfnText":"margin-inline-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-inline-start"},{"id":"ref-for-propdef-margin-inline-start\u2460"},{"id":"ref-for-propdef-margin-inline-start\u2461"},{"id":"ref-for-propdef-margin-inline-start\u2462"}],"title":"4. \nFlow-Relative Box Model Properties"},{"refs":[{"id":"ref-for-propdef-margin-inline-start\u2463"},{"id":"ref-for-propdef-margin-inline-start\u2464"}],"title":"4.2. \nFlow-Relative Margins:\nthe margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands"}],"url":"#propdef-margin-inline-start"}, "propdef-max-block-size": {"dfnID":"propdef-max-block-size","dfnText":"max-block-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-max-block-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-max-block-size"}, "propdef-max-inline-size": {"dfnID":"propdef-max-inline-size","dfnText":"max-inline-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-max-inline-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-max-inline-size"}, "propdef-min-block-size": {"dfnID":"propdef-min-block-size","dfnText":"min-block-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-min-block-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-min-block-size"}, "propdef-min-inline-size": {"dfnID":"propdef-min-inline-size","dfnText":"min-inline-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-min-inline-size"}],"title":"4.1. \nLogical Height and Logical Width:\nthe block-size/inline-size,\nmin-block-size/min-inline-size,\nand max-block-size/max-inline-size properties"}],"url":"#propdef-min-inline-size"}, "propdef-padding-block": {"dfnID":"propdef-padding-block","dfnText":"padding-block","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-block"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-block"}, "propdef-padding-block-end": {"dfnID":"propdef-padding-block-end","dfnText":"padding-block-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-block-end"},{"id":"ref-for-propdef-padding-block-end\u2460"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-block-end"}, "propdef-padding-block-start": {"dfnID":"propdef-padding-block-start","dfnText":"padding-block-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-block-start"},{"id":"ref-for-propdef-padding-block-start\u2460"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-block-start"}, "propdef-padding-inline": {"dfnID":"propdef-padding-inline","dfnText":"padding-inline","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-inline"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-inline"}, "propdef-padding-inline-end": {"dfnID":"propdef-padding-inline-end","dfnText":"padding-inline-end","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-inline-end"},{"id":"ref-for-propdef-padding-inline-end\u2460"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-inline-end"}, "propdef-padding-inline-start": {"dfnID":"propdef-padding-inline-start","dfnText":"padding-inline-start","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-inline-start"},{"id":"ref-for-propdef-padding-inline-start\u2460"}],"title":"4.4. \nFlow-Relative Padding:\nthe padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands"}],"url":"#propdef-padding-inline-start"}, "valdef-logical-page-recto": {"dfnID":"valdef-logical-page-recto","dfnText":"recto","external":false,"refSections":[],"url":"#valdef-logical-page-recto"}, "valdef-logical-page-selector-recto": {"dfnID":"valdef-logical-page-selector-recto","dfnText":":recto","external":false,"refSections":[],"url":"#valdef-logical-page-selector-recto"}, "valdef-logical-page-selector-verso": {"dfnID":"valdef-logical-page-selector-verso","dfnText":":verso","external":false,"refSections":[],"url":"#valdef-logical-page-selector-verso"}, "valdef-logical-page-verso": {"dfnID":"valdef-logical-page-verso","dfnText":"verso","external":false,"refSections":[],"url":"#valdef-logical-page-verso"}, "valdef-margin-logical": {"dfnID":"valdef-margin-logical","dfnText":"logical","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-margin-logical"},{"id":"ref-for-valdef-margin-logical\u2460"}],"title":"4.7. \nFour-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands"}],"url":"#valdef-margin-logical"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-color-5/#typedef-color": "Expands to: <alpha-value> | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#directional-keyword": {"displayText":"directional keyword","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"directional keyword","type":"dfn","url":"#directional-keyword"}, "#logical-property-group": {"displayText":"logical property group","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"logical property group","type":"dfn","url":"#logical-property-group"}, "#propdef-block-size": {"displayText":"block-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"block-size","type":"property","url":"#propdef-block-size"}, "#propdef-border-block": {"displayText":"border-block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block","type":"property","url":"#propdef-border-block"}, "#propdef-border-block-color": {"displayText":"border-block-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-color","type":"property","url":"#propdef-border-block-color"}, "#propdef-border-block-end": {"displayText":"border-block-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-end","type":"property","url":"#propdef-border-block-end"}, "#propdef-border-block-end-color": {"displayText":"border-block-end-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-end-color","type":"property","url":"#propdef-border-block-end-color"}, "#propdef-border-block-end-style": {"displayText":"border-block-end-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-end-style","type":"property","url":"#propdef-border-block-end-style"}, "#propdef-border-block-end-width": {"displayText":"border-block-end-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-end-width","type":"property","url":"#propdef-border-block-end-width"}, "#propdef-border-block-start": {"displayText":"border-block-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-start","type":"property","url":"#propdef-border-block-start"}, "#propdef-border-block-start-color": {"displayText":"border-block-start-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-start-color","type":"property","url":"#propdef-border-block-start-color"}, "#propdef-border-block-start-style": {"displayText":"border-block-start-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-start-style","type":"property","url":"#propdef-border-block-start-style"}, "#propdef-border-block-start-width": {"displayText":"border-block-start-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-start-width","type":"property","url":"#propdef-border-block-start-width"}, "#propdef-border-block-style": {"displayText":"border-block-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-style","type":"property","url":"#propdef-border-block-style"}, "#propdef-border-block-width": {"displayText":"border-block-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-block-width","type":"property","url":"#propdef-border-block-width"}, "#propdef-border-end-end-radius": {"displayText":"border-end-end-radius","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-end-end-radius","type":"property","url":"#propdef-border-end-end-radius"}, "#propdef-border-end-start-radius": {"displayText":"border-end-start-radius","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-end-start-radius","type":"property","url":"#propdef-border-end-start-radius"}, "#propdef-border-inline": {"displayText":"border-inline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline","type":"property","url":"#propdef-border-inline"}, "#propdef-border-inline-color": {"displayText":"border-inline-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-color","type":"property","url":"#propdef-border-inline-color"}, "#propdef-border-inline-end": {"displayText":"border-inline-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-end","type":"property","url":"#propdef-border-inline-end"}, "#propdef-border-inline-end-color": {"displayText":"border-inline-end-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-end-color","type":"property","url":"#propdef-border-inline-end-color"}, "#propdef-border-inline-end-style": {"displayText":"border-inline-end-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-end-style","type":"property","url":"#propdef-border-inline-end-style"}, "#propdef-border-inline-end-width": {"displayText":"border-inline-end-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-end-width","type":"property","url":"#propdef-border-inline-end-width"}, "#propdef-border-inline-start": {"displayText":"border-inline-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-start","type":"property","url":"#propdef-border-inline-start"}, "#propdef-border-inline-start-color": {"displayText":"border-inline-start-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-start-color","type":"property","url":"#propdef-border-inline-start-color"}, "#propdef-border-inline-start-style": {"displayText":"border-inline-start-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-start-style","type":"property","url":"#propdef-border-inline-start-style"}, "#propdef-border-inline-start-width": {"displayText":"border-inline-start-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-start-width","type":"property","url":"#propdef-border-inline-start-width"}, "#propdef-border-inline-style": {"displayText":"border-inline-style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-style","type":"property","url":"#propdef-border-inline-style"}, "#propdef-border-inline-width": {"displayText":"border-inline-width","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-inline-width","type":"property","url":"#propdef-border-inline-width"}, "#propdef-border-start-end-radius": {"displayText":"border-start-end-radius","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-start-end-radius","type":"property","url":"#propdef-border-start-end-radius"}, "#propdef-border-start-start-radius": {"displayText":"border-start-start-radius","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"border-start-start-radius","type":"property","url":"#propdef-border-start-start-radius"}, "#propdef-inline-size": {"displayText":"inline-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inline-size","type":"property","url":"#propdef-inline-size"}, "#propdef-inset": {"displayText":"inset","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset","type":"property","url":"#propdef-inset"}, "#propdef-inset-block": {"displayText":"inset-block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-block","type":"property","url":"#propdef-inset-block"}, "#propdef-inset-block-end": {"displayText":"inset-block-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-block-end","type":"property","url":"#propdef-inset-block-end"}, "#propdef-inset-block-start": {"displayText":"inset-block-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-block-start","type":"property","url":"#propdef-inset-block-start"}, "#propdef-inset-inline": {"displayText":"inset-inline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-inline","type":"property","url":"#propdef-inset-inline"}, "#propdef-inset-inline-end": {"displayText":"inset-inline-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-inline-end","type":"property","url":"#propdef-inset-inline-end"}, "#propdef-inset-inline-start": {"displayText":"inset-inline-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"inset-inline-start","type":"property","url":"#propdef-inset-inline-start"}, "#propdef-margin-block": {"displayText":"margin-block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-block","type":"property","url":"#propdef-margin-block"}, "#propdef-margin-block-end": {"displayText":"margin-block-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-block-end","type":"property","url":"#propdef-margin-block-end"}, "#propdef-margin-block-start": {"displayText":"margin-block-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-block-start","type":"property","url":"#propdef-margin-block-start"}, "#propdef-margin-inline": {"displayText":"margin-inline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-inline","type":"property","url":"#propdef-margin-inline"}, "#propdef-margin-inline-end": {"displayText":"margin-inline-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-inline-end","type":"property","url":"#propdef-margin-inline-end"}, "#propdef-margin-inline-start": {"displayText":"margin-inline-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"margin-inline-start","type":"property","url":"#propdef-margin-inline-start"}, "#propdef-max-block-size": {"displayText":"max-block-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"max-block-size","type":"property","url":"#propdef-max-block-size"}, "#propdef-max-inline-size": {"displayText":"max-inline-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"max-inline-size","type":"property","url":"#propdef-max-inline-size"}, "#propdef-min-block-size": {"displayText":"min-block-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"min-block-size","type":"property","url":"#propdef-min-block-size"}, "#propdef-min-inline-size": {"displayText":"min-inline-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"min-inline-size","type":"property","url":"#propdef-min-inline-size"}, "#propdef-padding-block": {"displayText":"padding-block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-block","type":"property","url":"#propdef-padding-block"}, "#propdef-padding-block-end": {"displayText":"padding-block-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-block-end","type":"property","url":"#propdef-padding-block-end"}, "#propdef-padding-block-start": {"displayText":"padding-block-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-block-start","type":"property","url":"#propdef-padding-block-start"}, "#propdef-padding-inline": {"displayText":"padding-inline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-inline","type":"property","url":"#propdef-padding-inline"}, "#propdef-padding-inline-end": {"displayText":"padding-inline-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-inline-end","type":"property","url":"#propdef-padding-inline-end"}, "#propdef-padding-inline-start": {"displayText":"padding-inline-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"padding-inline-start","type":"property","url":"#propdef-padding-inline-start"}, "#valdef-margin-logical": {"displayText":"logical","export":true,"for_":["border-color","border-style","border-width","margin","padding"],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"local","text":"logical","type":"value","url":"#valdef-margin-logical"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom": {"displayText":"border-bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color": {"displayText":"border-bottom-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius": {"displayText":"border-bottom-left-radius","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-left-radius","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius": {"displayText":"border-bottom-right-radius","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-right-radius","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style": {"displayText":"border-bottom-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width": {"displayText":"border-bottom-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color": {"displayText":"border-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left": {"displayText":"border-left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color": {"displayText":"border-left-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style": {"displayText":"border-left-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width": {"displayText":"border-left-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius": {"displayText":"border-radius","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-radius","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right": {"displayText":"border-right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color": {"displayText":"border-right-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style": {"displayText":"border-right-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width": {"displayText":"border-right-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style": {"displayText":"border-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top": {"displayText":"border-top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color": {"displayText":"border-top-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius": {"displayText":"border-top-left-radius","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-left-radius","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius": {"displayText":"border-top-right-radius","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-right-radius","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style": {"displayText":"border-top-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width": {"displayText":"border-top-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width": {"displayText":"border-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "https://drafts.csswg.org/css-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-bottom": {"displayText":"margin-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-bottom","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-left": {"displayText":"margin-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-left","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-right": {"displayText":"margin-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-right","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-top": {"displayText":"margin-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-top","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "https://drafts.csswg.org/css-box-4/#propdef-padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-bottom": {"displayText":"padding-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-bottom","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-bottom"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-left": {"displayText":"padding-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-left","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-left"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-right": {"displayText":"padding-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-right","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-right"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-top": {"displayText":"padding-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-top","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-top"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#longhand": {"displayText":"longhand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"longhand property","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "https://drafts.csswg.org/css-cascade-5/#propdef-all": {"displayText":"all","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"all","type":"property","url":"https://drafts.csswg.org/css-cascade-5/#propdef-all"}, "https://drafts.csswg.org/css-cascade-5/#shorthand-property": {"displayText":"shorthand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"shorthand","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "https://drafts.csswg.org/css-cascade-5/#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"specified value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherit","type":"value","url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "https://drafts.csswg.org/css-cascade-6/#cascade": {"displayText":"cascade","export":true,"for_":[],"level":"6","normative":true,"shortname":"css-cascade","spec":"css-cascade-6","status":"current","text":"cascade","type":"dfn","url":"https://drafts.csswg.org/css-cascade-6/#cascade"}, "https://drafts.csswg.org/css-color-5/#typedef-color": {"displayText":"<color>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"current","text":"<color>","type":"type","url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "https://drafts.csswg.org/css-display-4/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "https://drafts.csswg.org/css-position-3/#propdef-bottom": {"displayText":"bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"bottom","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "https://drafts.csswg.org/css-position-3/#propdef-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"left","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "https://drafts.csswg.org/css-position-3/#propdef-right": {"displayText":"right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"right","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "https://drafts.csswg.org/css-position-3/#propdef-top": {"displayText":"top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"top","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin": {"displayText":"scroll-margin","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll-margin","type":"property","url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"}, "https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding": {"displayText":"scroll-padding","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll-padding","type":"property","url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-tables-3/#table-wrapper-box": {"displayText":"table wrapper box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"table wrapper box","type":"dfn","url":"https://drafts.csswg.org/css-tables-3/#table-wrapper-box"}, "https://drafts.csswg.org/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"text-align","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#mult-num-range": {"displayText":"{A,B}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"{a,b}","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-writing-modes-3/#css-end": {"displayText":"end","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#css-end"}, "https://drafts.csswg.org/css-writing-modes-3/#css-start": {"displayText":"start","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#css-start"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#block-end": {"displayText":"block-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block-end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "https://drafts.csswg.org/css-writing-modes-4/#block-start": {"displayText":"block-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block-start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-start"}, "https://drafts.csswg.org/css-writing-modes-4/#flow-relative": {"displayText":"flow-relative","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"flow-relative","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#flow-relative"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-start": {"displayText":"inline-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "https://drafts.csswg.org/css-writing-modes-4/#line-relative": {"displayText":"line-relative","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-relative","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-relative"}, "https://drafts.csswg.org/css-writing-modes-4/#physical": {"displayText":"physical","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"physical","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#physical"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation": {"displayText":"text-orientation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"text-orientation","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr": {"displayText":"ltr","export":true,"for_":["direction"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"ltr","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl": {"displayText":"rtl","export":true,"for_":["direction"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"rtl","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl"}, "https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb": {"displayText":"horizontal-tb","export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"horizontal-tb","type":"value","url":"https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb"}, "https://drafts.csswg.org/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "https://drafts.csswg.org/css2/#propdef-caption-side": {"displayText":"caption-side","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"caption-side","type":"property","url":"https://drafts.csswg.org/css2/#propdef-caption-side"}, "https://drafts.csswg.org/css2/#propdef-max-height": {"displayText":"max-height","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"max-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-max-height"}, "https://drafts.csswg.org/css2/#propdef-max-width": {"displayText":"max-width","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"max-width","type":"property","url":"https://drafts.csswg.org/css2/#propdef-max-width"}, "https://drafts.csswg.org/css2/#propdef-min-height": {"displayText":"min-height","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"min-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-min-height"}, "https://drafts.csswg.org/css2/#propdef-min-width": {"displayText":"min-width","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"min-width","type":"property","url":"https://drafts.csswg.org/css2/#propdef-min-width"}, "https://drafts.csswg.org/css2/#propdef-page-break-after": {"displayText":"page-break-after","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-after","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "https://drafts.csswg.org/css2/#propdef-page-break-before": {"displayText":"page-break-before","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-before","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const refHintKey = link.getAttribute("data-refhint-key"); let key = url; if(refHintKey) { key = refHintKey + "_" + url; } const ref = refsData[key]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>