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 Box Model Module Level 4</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-box-4/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="efb1d2159fec364f7d50f2a157a7ee3fdd0ae907" 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>/* 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-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 Box Model Module Level 4</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2025-01-18">18 January 2025</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-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/WD-css-box-4-20200421/" rel="prev">https://www.w3.org/TR/2020/WD-css-box-4-20200421/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-box-4">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editor: <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-box-4/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2025 <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 specification describes the margin and padding properties, which create spacing in and around a CSS box. It may later be extended to include borders (currently described in <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[css-backgrounds-3]</a>). <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-box” in the title, like this: “[css-box] …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-box%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> <li><a href="#placement">1.2 Module Interactions</a> </ol> <li> <a href="#box-model">2 The CSS Box Model</a> <ol class="toc"> <li><a href="#box-edges">2.1 Boxes and Edges</a> <li><a href="#fragmentation">2.2 Fragmentation</a> <li><a href="#keywords">2.3 Box-edge Keywords</a> </ol> <li> <a href="#margins">3 Margins</a> <ol class="toc"> <li><a href="#margin-physical">3.1 Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a> <li><a href="#margin-shorthand">3.2 Margin Shorthand: the margin property</a> <li> <a href="#margin-trim">3.3 Margins at Container Edges: the margin-trim property</a> <ol class="toc"> <li><a href="#margin-trim-block">3.3.1 Trimming Block Container Content</a> <li><a href="#margin-trim-flex">3.3.2 Trimming Flex Container Content</a> <li><a href="#margin-trim-grid">3.3.3 Trimming Grid Container Content</a> </ol> </ol> <li> <a href="#paddings">4 Padding</a> <ol class="toc"> <li><a href="#padding-physical">4.1 Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a> <li><a href="#padding-shorthand">4.2 Padding Shorthand: the padding property</a> </ol> <li><a href="#borders">5 Borders</a> <li><a href="#changes">6 Recent Changes</a> <li><a href="#changes-since-3">7 Changes Since CSS Level 3</a> <li><a href="#changes-since-2">8 Changes Since CSS Level 2</a> <li><a href="#priv">9 Privacy Considerations</a> <li><a href="#sec">10 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> <li><a href="#informative"> Informative 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> This subsection is not normative. CSS describes how each element and each string of text in a source document is laid out by transforming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#element-tree" id="ref-for-element-tree">element tree</a> into a set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box">boxes</a>, whose size, position, and stacking level on the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/intro.html#canvas" id="ref-for-canvas">canvas</a> depend on the values of their CSS properties. Note: <a href="https://www.w3.org/TR/css-cascade/">CSS Cascading and Inheritance</a> describes how properties are assigned to elements in the box tree, while <a href="https://drafts.csswg.org/css-display-3/#intro"><cite>CSS Display 3</cite> § 1 Introduction</a> describes how the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#element-tree" id="ref-for-element-tree①">element tree</a> is transformed into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box-tree" id="ref-for-box-tree">box tree</a>. Each CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①">box</a> has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property">sizing properties</a> <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[css-sizing-3]</a>, together with various other properties that control layout, define the size of the content area. The box styling properties—<a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding">padding</a> and its longhands, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> and its longhands, and <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin">margin</a> and its longhands—define the sizes of these other areas. Margins and padding are defined in this module; borders are defined in <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[css-backgrounds-3]</a>. Note: This module <a href="https://www.w3.org/TR/2018/WD-css3-box-20180731/">originally contained</a> the CSS Level 3 specification prose relating to box generation (now defined in <a data-link-type="biblio" href="#biblio-css-display-3" title="CSS Display Module Level 3">[css-display-3]</a>), the box model (defined here), as well as block layout (now only defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Chapters 9 and 10). Since its maintenance was put aside during the development of CSS2.1, its prose was severely outdated by the time CSS2 Revision 1 was finally completed. Therefore, the block layout portion of the prose has been retired, to be re-synched to <a href="https://www.w3.org/TR/CSS2">CSS2</a> and updated as input to a new Block Layout module at some point in the future. It is being split apart from this module and from the <a href="https://www.w3.org/TR/css-display/">CSS Display Module</a> both because of the practical concern that it would be a huge amount of work and also in recognition that CSS now has multiple layout models (<a href="https://www.w3.org/TR/css-flexbox/">Flex Layout</a>, <a href="https://www.w3.org/TR/css-grid/">Grid Layout</a>, <a href="https://www.w3.org/TR/css-position/">Positioned Layout</a>, and <a href="https://www.w3.org/TR/css-tables/">Table Layout</a>, in addition to Block Layout) which each deserve their own parallel module. <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. <h3 class="heading settled" data-level="1.2" id="placement">1.2. Module Interactions<a class="self-link" href="#placement"></a></h3> This module replaces the definitions of the margin and padding properties defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> sections 8.1, 8.2, 8.3 (but not 8.3.1), and 8.4. All properties in this module apply to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> pseudo-elements. <h2 class="heading settled" data-level="2" id="box-model">2. The CSS Box Model<a class="self-link" href="#box-model"></a></h2> Each box has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-area">content area</dfn> (which contains its content—text, descendant boxes, an image or other <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element">replaced element</a> content, etc.) and optional surrounding <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="padding area" id="padding-area">padding</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="border area" id="border-area">border</dfn>, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="margin area" id="margin-area">margin areas</dfn>; the size of each area is specified by corresponding properties, and can be zero (or in the case of margins, negative). The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box: <div class="figure"> <img alt="Diagram of a typical box, showing the content, padding, border and margin areas" height="272" src="images/box.png" width="461"> The various areas and edges of a typical box. </div> The background of the content, padding, and border areas of a box is specified by its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a> properties. The border area can additionally be painted with a border style using the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border①">border</a> properties. Margins are always transparent. See <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[css-backgrounds-3]</a>. The margin, border, and padding can be broken down into top, right, bottom, and left segments, each of which can be controlled independently by its corresponding property. <h3 class="heading settled" data-level="2.1" id="box-edges">2.1. Boxes and Edges<a class="self-link" href="#box-edges"></a></h3> The perimeter of each of the four areas (content, padding, border, and margin) is called an <dfn class="dfn-paneled" data-dfn-for="box" data-dfn-type="dfn" data-export data-lt="box edge | edge" id="box-box-edge">edge</dfn>, and each <a data-link-type="dfn" href="#box-box-edge" id="ref-for-box-box-edge">edge</a> can be broken down into a top, right, bottom, and left side. Thus each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②">box</a> has four edges each composed of four sides: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-edge">content edge</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inner-edge">inner edge</dfn> <dd> The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element’s content and/or its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a> size. The four sides of the <a data-link-type="dfn" href="#content-edge" id="ref-for-content-edge">content edge</a> together define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-box">content box</dfn>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding-edge">padding edge</dfn> <dd> The padding edge surrounds the box’s padding. If the padding has zero width on a given side, the padding edge coincides with the content edge on that side. The four sides of the <a data-link-type="dfn" href="#padding-edge" id="ref-for-padding-edge">padding edge</a> together define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding-box">padding box</dfn>, which contains both the <a data-link-type="dfn" href="#content-area" id="ref-for-content-area">content</a> and <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area">padding areas</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-edge">border edge</dfn> <dd> The border edge surrounds the box’s border. If the border has zero width on a given side, the border edge coincides with the padding edge on that side. The four sides of the <a data-link-type="dfn" href="#border-edge" id="ref-for-border-edge">border edge</a> together define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-box">border box</dfn>, which contains the box’s <a data-link-type="dfn" href="#content-area" id="ref-for-content-area①">content</a>, <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area①">padding</a>, and <a data-link-type="dfn" href="#border-area" id="ref-for-border-area">border areas</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-edge">margin edge</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="outer-edge">outer edge</dfn> <dd> The margin edge surrounds the box’s margin. If the margin has zero width on a given side, the margin edge coincides with the border edge on that side. The four sides of the <a data-link-type="dfn" href="#margin-edge" id="ref-for-margin-edge">margin edge</a> together define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-box">margin box</dfn>, which contains the all of the box’s <a data-link-type="dfn" href="#content-area" id="ref-for-content-area②">content</a>, <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area②">padding</a>, <a data-link-type="dfn" href="#border-area" id="ref-for-border-area①">border</a>, and <a data-link-type="dfn" href="#margin-area" id="ref-for-margin-area">margin areas</a>. </dl> Properties like <a class="property 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> can change the shape of the box’s <a data-link-type="dfn" href="#box-box-edge" id="ref-for-box-box-edge②">edges</a> as used for painting and clipping (see <a href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"><cite>CSS Backgrounds 3</cite> § 4.3 Corner Clipping</a>); these effects typically do not affect layout however. To distinguish, specifications can refer to the relevant <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="shaped edge | shaped content edge | shaped padding edge | shaped border edge | shaped margin edge" id="shaped-edge">shaped edge</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="unshaped edge | unshaped content edge | unshaped padding edge | unshaped border edge | unshaped margin edge" id="unshaped-edge">unshaped edge</dfn> <h3 class="heading settled" data-level="2.2" id="fragmentation">2.2. Fragmentation<a class="self-link" href="#fragmentation"></a></h3> When a box <a href="https://www.w3.org/TR/css-break-4/#fragmentation-model">fragments</a>—is broken, as across lines or across pages, into separate <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>—each of its boxes (<a data-link-type="dfn" href="#content-box" id="ref-for-content-box">content box</a>, <a data-link-type="dfn" href="#padding-box" id="ref-for-padding-box">padding box</a>, <a data-link-type="dfn" href="#border-box" id="ref-for-border-box">border box</a>, <a data-link-type="dfn" href="#margin-box" id="ref-for-margin-box">margin box</a>) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in <a data-link-type="biblio" href="#biblio-css-break-4" title="CSS Fragmentation Module Level 4">[css-break-4]</a> and controlled by the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> property. <h3 class="heading settled" data-level="2.3" id="keywords">2.3. Box-edge Keywords<a class="self-link" href="#keywords"></a></h3> The following <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-box"><a class="production css" data-link-type="type" href="#typedef-box" id="ref-for-typedef-box"><box></a></dfn> CSS keywords are defined for use in properties (such as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-box" id="ref-for-propdef-transform-box">transform-box</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a>) that need to refer to various box edges: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<visual-box>,<layout-box>,<shape-box>,<geometry-box>,<paint-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-content-box">content-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="#content-box" id="ref-for-content-box①">content box</a> or <a data-link-type="dfn" href="#content-edge" id="ref-for-content-edge①">content edge</a>. (In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-fill-box" id="ref-for-valdef-box-fill-box">fill-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<visual-box>,<layout-box>,<shape-box>,<geometry-box>,<paint-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-padding-box">padding-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="#padding-box" id="ref-for-padding-box①">padding box</a> or <a data-link-type="dfn" href="#padding-edge" id="ref-for-padding-edge①">padding edge</a>. (In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-fill-box" id="ref-for-valdef-box-fill-box①">fill-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<visual-box>,<layout-box>,<shape-box>,<geometry-box>,<paint-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-border-box">border-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="#border-box" id="ref-for-border-box①">border box</a> or <a data-link-type="dfn" href="#border-edge" id="ref-for-border-edge①">border edge</a>. (In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-stroke-box" id="ref-for-valdef-box-stroke-box">stroke-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<layout-box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-margin-box">margin-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="#margin-box" id="ref-for-margin-box①">margin box</a> or <a data-link-type="dfn" href="#margin-edge" id="ref-for-margin-edge①">margin edge</a>. (In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-stroke-box" id="ref-for-valdef-box-stroke-box①">stroke-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<geometry-box>,<paint-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-fill-box">fill-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox">object bounding box</a> or its edges. (In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-content-box" id="ref-for-valdef-box-content-box">content-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<geometry-box>,<paint-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-stroke-box">stroke-box</dfn> <dd> Refers to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox" id="ref-for-TermStrokeBoundingBox">stroke bounding box</a> or its edges. (In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-border-box" id="ref-for-valdef-box-border-box">border-box</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<geometry-box>,<coord-box>" data-dfn-type="value" data-export id="valdef-box-view-box">view-box</dfn> <dd> Refers to the nearest <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermSVGViewport" id="ref-for-TermSVGViewport">SVG viewport</a>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="origin box" data-lt="SVG viewport origin box" data-noexport id="svg-viewport-origin-box">origin box</dfn>, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-border-box" id="ref-for-valdef-box-border-box①">border-box</a>.) Note: When the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermSVGViewport" id="ref-for-TermSVGViewport②">SVG viewport</a> is not itself anchored at the origin, this <a data-link-type="dfn" href="#svg-viewport-origin-box" id="ref-for-svg-viewport-origin-box">origin box</a> does not actually correspond to the SVG viewport! </dl> For convenience, the following value types are defined to represents commonly used subsets of <a class="production css" data-link-type="type" href="#typedef-box" id="ref-for-typedef-box①"><box></a>: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-visual-box"><a class="production" data-link-type="type" href="#typedef-visual-box" id="ref-for-typedef-visual-box"><visual-box></a></dfn> = content-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> padding-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> border-box <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-layout-box"><a class="production" data-link-type="type" href="#typedef-layout-box" id="ref-for-typedef-layout-box"><layout-box></a></dfn> = <a class="production" data-link-type="type" href="#typedef-visual-box" id="ref-for-typedef-visual-box①"><visual-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> margin-box <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-paint-box"><a class="production" data-link-type="type" href="#typedef-paint-box" id="ref-for-typedef-paint-box"><paint-box></a></dfn> = <a class="production" data-link-type="type" href="#typedef-visual-box" id="ref-for-typedef-visual-box②"><visual-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> fill-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> stroke-box <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-coord-box"><a class="production" data-link-type="type" href="#typedef-coord-box" id="ref-for-typedef-coord-box"><coord-box></a></dfn> = <a class="production" data-link-type="type" href="#typedef-paint-box" id="ref-for-typedef-paint-box①"><paint-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> view-box </pre> <h2 class="heading settled" data-level="3" id="margins">3. Margins<a class="self-link" href="#margins"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="margin" id="margin">Margins</dfn> surround the border edge of a box, providing spacing between boxes. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-properties">margin properties</dfn> specify the thickness of the <a data-link-type="dfn" href="#margin-area" id="ref-for-margin-area①">margin area</a> of a box. The <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin①">margin</a> <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 margin for all four sides while the margin <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand">longhand properties</a> only set their respective side. This specification defines the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical">physical</a> margin longhands; <a href="https://drafts.csswg.org/css-logical-1/#margin-properties"><cite>CSS Logical Properties 1</cite> § 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> additionally defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> margin longhands. Both sets of properties control the same set of margins: they are just different ways of indexing each side. Note: Adjoining margins in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-layout" id="ref-for-block-layout">block layout</a> collapse. See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2§8.3.1 Collapsing Margins</a> for details. Also, margins adjoining a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break">fragmentation break</a> are sometimes truncated. See <a href="https://drafts.csswg.org/css-break-4/#break-margins"><cite>CSS Fragmentation 4</cite> § 5.2 Adjoining Margins at Breaks: the margin-break property</a> for details. <h3 class="heading settled" data-level="3.1" id="margin-physical">3.1. Page-relative (Physical) Margin Properties: the <a class="property css" data-link-type="property" href="#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a>, <a class="property css" data-link-type="property" href="#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a>, <a class="property css" data-link-type="property" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>, and <a class="property css" data-link-type="property" href="#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> properties<a class="self-link" href="#margin-physical"></a></h3> <table class="def propdef" data-link-for-hint="margin-top"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-top">margin-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-right">margin-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-bottom">margin-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-left">margin-left</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="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> auto <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>all elements except <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#internal-table-element" id="ref-for-internal-table-element">internal table elements</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box">ruby base containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box">ruby annotation containers</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>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width">logical width</a> of containing block <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword auto or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> value <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-margin" id="ref-for-propdef-margin④">margin</a> </table> These properties set the top, right, bottom, and left <a data-link-type="dfn" href="#margin" id="ref-for-margin">margin</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③">box</a>, respectively. Negative values for margin properties are allowed, but there may be implementation-specific limits. <h3 class="heading settled" data-level="3.2" id="margin-shorthand">3.2. Margin Shorthand: the <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin⑤">margin</a> property<a class="self-link" href="#margin-shorthand"></a></h3> <table class="def propdef" data-link-for-hint="margin"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin">margin</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-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,4}</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>all elements except <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#internal-table-element" id="ref-for-internal-table-element①">internal table elements</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box①">ruby base containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box①">ruby annotation containers</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>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width①">logical width</a> of containing block <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/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 </table> The <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin⑥">margin</a> property is a shorthand property for setting <a class="property css" data-link-type="property" href="#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a>, <a class="property css" data-link-type="property" href="#propdef-margin-right" id="ref-for-propdef-margin-right①">margin-right</a>, <a class="property css" data-link-type="property" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a>, and <a class="property css" data-link-type="property" href="#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> in a single declaration. If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. <div class="example" id="example-2e169656"> <a class="self-link" href="#example-2e169656"></a> The following code demonstrates some possible <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin⑦">margin</a> declarations. <pre>body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ </pre> The last rule of the example above is equivalent to the example below: <pre>body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ } </pre> </div> <h3 class="heading settled" data-level="3.3" id="margin-trim">3.3. Margins at Container Edges: the <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim">margin-trim</a> property<a class="self-link" href="#margin-trim"></a></h3> <table class="def propdef" data-link-for-hint="margin-trim"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-trim">margin-trim</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> [ block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> inline ] | [ block-start || inline-start || block-end || inline-end ] <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><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-2/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</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>a set of zero to four keywords indicating which sides to trim <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 </table> Oftentimes, margins are desired between siblings, but not at the start/end of the container where spacing can be controlled with padding. This property allows the container to trim the margins of its children where they adjoin the container’s edges. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-none">none</dfn> <dd> Margins are not trimmed by the container. Note: However, in block layout, child margins can collapse with their parent. See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2§8.3.1: Collapsing Margins</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-block-start">block-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-block-end">block-end</dfn> <dd> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow">in-flow</a> boxes contained by this box, margins adjacent to the box’s specified edges are truncated to zero. It also truncates any descendant margins collapsed with such a margin (but not its own, its siblings’, or its ancestors’). <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-inline-start">inline-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-inline-end">inline-end</dfn> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow①">in-flow</a> boxes contained by this box, margins adjacent to the box’s specified edges are truncated to zero. (However, these values do not apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container①">block containers</a>) <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-block">block</dfn> <dd> Computes to block-start block-end. <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-inline">inline</dfn> <dd> Computes to inline-start inline-end. </dl> Note: Following the shortest-serialization principle, <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> equivalent to <a class="css" data-link-type="maybe" href="#valdef-margin-trim-block" id="ref-for-valdef-margin-trim-block">block</a> or <a class="css" data-link-type="maybe" href="#valdef-margin-trim-inline" id="ref-for-valdef-margin-trim-inline">inline</a> will serialize as those keywords. Adjacency is not sensitive to space governed by box alignment <a data-link-type="biblio" href="#biblio-css-align-3" title="CSS Box Alignment Module Level 3">[CSS-ALIGN-3]</a>, and ignores collapsed boxes (see <a href="https://drafts.csswg.org/css-flexbox-1/#visibility-collapse"><cite>CSS Flexbox 1</cite> § 4.4 Collapsed Items</a>) and tracks (<a href="https://drafts.csswg.org/css-grid-1/#auto-repeat"><cite>CSS Grid Layout 1</cite> § 7.2.3.2 Repeat-to-fill: auto-fill and auto-fit repetitions</a>). Note: See also the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-margin-break" id="ref-for-propdef-margin-break">margin-break</a> property, which applies to the box’s own margins when they adjoin a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break①">fragmentation break</a> (page break / column break / etc.). <a class="self-link" href="#issue-c93b5c6f"></a> Define how this property affects margins at breaks if the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context" id="ref-for-fragmentation-context">fragmentation context</a>. See also <a href="https://github.com/w3c/csswg-drafts/issues/3314">Issue 3314</a>. Note: This property has no effect on the margins of floats when specified on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container②">block container</a>; a future level of this module may introduce specific controls for floats. <h4 class="heading settled" data-level="3.3.1" id="margin-trim-block">3.3.1. Trimming Block Container Content<a class="self-link" href="#margin-trim-block"></a></h4> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container③">block containers</a> specifically, <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim①">margin-trim</a> discards: <ul> <li>The block-start margin of a block-level first child, when trimming at the block-start edge. <li>The block-end margin of a block-level last child, when trimming at the block-end edge. <li>Any margin collapsed with these margins. </ul> It has no effect on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline-axis</a> margins of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> descendants, nor on any margins of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level" id="ref-for-inline-level">inline-level</a> descendants. <h4 class="heading settled" data-level="3.3.2" id="margin-trim-flex">3.3.2. Trimming Flex Container Content<a class="self-link" href="#margin-trim-flex"></a></h4> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a> specifically, <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim②">margin-trim</a> discards <ul> <li>the corresponding margin of each <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex item</a> on the closest <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line">flex line</a> when trimming an edge parallel to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis">main axis</a> <li>the corresponding margin of the first/last <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①">flex item</a> on each <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line①">flex line</a> when trimming an edge parallel to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis">cross axis</a> </ul> This process ignores any <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#collapsed-flex-item" id="ref-for-collapsed-flex-item">collapsed flex items</a>. <h4 class="heading settled" data-level="3.3.3" id="margin-trim-grid">3.3.3. Trimming Grid Container Content<a class="self-link" href="#margin-trim-grid"></a></h4> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a> specifically, <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim③">margin-trim</a> discards the corresponding margin of each <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item">grid item</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-track" id="ref-for-grid-track">grid track</a> adjacent to the relevant <a data-link-type="dfn" href="#box-box-edge" id="ref-for-box-box-edge③">box edge</a>. This process ignores any <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#collapsed-grid-track" id="ref-for-collapsed-grid-track">collapsed grid tracks</a>. It does not otherwise ignore any empty <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-track" id="ref-for-grid-track①">grid tracks</a>. <h2 class="heading settled" data-level="4" id="paddings">4. Padding<a class="self-link" href="#paddings"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding">Padding</dfn> is inserted between the content edge and the padding edge of a box, providing spacing between the content and the border. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding-properties">padding properties</dfn> specify the thickness of the <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area③">padding area</a> of a box. The <a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding①">padding</a> <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 padding for all four sides while the padding <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand③">longhand properties</a> only set their respective side. This specification defines the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical①">physical</a> padding longhands; <a href="https://drafts.csswg.org/css-logical-1/#padding-properties"><cite>CSS Logical Properties 1</cite> § 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> additionally defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a> padding longhands. Both sets of properties control the same set of padding: they are just different ways of indexing each side. Note: Backgrounds specified on the box are by default laid out and painted within the padding edges. (They are additionally painted underneath the border, in the <a data-link-type="dfn" href="#border-area" id="ref-for-border-area②">border area</a>.) This behavior can be adjusted using the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a> properties. <h3 class="heading settled" data-level="4.1" id="padding-physical">4.1. Page-relative (Physical) Padding Properties: the <a class="property css" data-link-type="property" href="#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a>, <a class="property css" data-link-type="property" href="#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a>, <a class="property css" data-link-type="property" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a>, and <a class="property css" data-link-type="property" href="#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> properties<a class="self-link" href="#padding-physical"></a></h3> <table class="def propdef" data-link-for-hint="padding-top"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-top">padding-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-right">padding-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-bottom">padding-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-left">padding-left</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="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage [0,∞]></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>all elements except: <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#internal-table-element" id="ref-for-internal-table-element②">internal table elements</a> other than table cells, <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box②">ruby base containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box②">ruby annotation containers</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>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width②">logical width</a> of containing block <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> value <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-padding" id="ref-for-propdef-padding④">padding</a> </table> These properties set the top, right, bottom, and left <a data-link-type="dfn" href="#padding" id="ref-for-padding">padding</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box④">box</a>, respectively. Negative values for padding properties are invalid. <h3 class="heading settled" data-level="4.2" id="padding-shorthand">4.2. Padding Shorthand: the <a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑤">padding</a> property<a class="self-link" href="#padding-shorthand"></a></h3> <table class="def propdef" data-link-for-hint="padding"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding">padding</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-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,4}</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>all elements except: <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#internal-table-element" id="ref-for-internal-table-element③">internal table elements</a> other than table cells, <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box③">ruby base containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box③">ruby annotation containers</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>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width③">logical width</a> of containing block <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/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 </table> The <a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑥">padding</a> property is a shorthand property for setting <a class="property css" data-link-type="property" href="#propdef-padding-top" id="ref-for-propdef-padding-top②">padding-top</a>, <a class="property css" data-link-type="property" href="#propdef-padding-right" id="ref-for-propdef-padding-right①">padding-right</a>, <a class="property css" data-link-type="property" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom①">padding-bottom</a>, and <a class="property css" data-link-type="property" href="#propdef-padding-left" id="ref-for-propdef-padding-left①">padding-left</a> in a single declaration. If there is only one component value, it applies to all sides. If there are two values, the top and bottom padding are set to the first value and the right and left padding are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. <div class="example" id="example-23862f1f"> <a class="self-link" href="#example-23862f1f"></a> The following code demonstrates some possible <a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑦">padding</a> declarations. <pre>body { padding: 2em } /* all padding set to 2em */ body { padding: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { padding: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ </pre> The last rule of the example above is equivalent to the example below: <pre>body { padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 2em; /* copied from opposite side (right) */ } </pre> </div> <h2 class="heading settled" data-level="5" id="borders">5. Borders<a class="self-link" href="#borders"></a></h2> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="border" id="border">Borders</dfn> fill the <a data-link-type="dfn" href="#border-area" id="ref-for-border-area③">border area</a>, to visually delineate the edges of the box, The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-properties">border properties</dfn> specify the thickness of the border area of a box, as well as its drawing style and color. See <a href="https://drafts.csswg.org/css-backgrounds-3/#borders"><cite>CSS Backgrounds 3</cite> § 3 Borders</a> for the definition of the physical variants of these properties; <a href="https://drafts.csswg.org/css-logical-1/#border-properties"><cite>CSS Logical Properties 1</cite> § 4.5 Flow-Relative Borders</a> additionally defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative②">flow-relative</a> border <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand⑥">longhands</a>. Both sets of properties control the same set of borders: they are just different ways of indexing each side. <h2 class="heading settled" data-level="6" id="changes">6. Recent Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-box-4-20240401/">1 April 2024 Working Draft</a> include: <ul> <li data-md> Allowing combining the <a class="css" data-link-type="maybe" href="#valdef-margin-trim-block" id="ref-for-valdef-margin-trim-block①">block</a> and <a class="css" data-link-type="maybe" href="#valdef-margin-trim-inline" id="ref-for-valdef-margin-trim-inline①">inline</a> keywords of <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim④">margin-trim</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7884">Issue 7884</a>) <li data-md> Introducing the <a data-link-type="dfn" href="#shaped-edge" id="ref-for-shaped-edge">shaped edge</a> and <a data-link-type="dfn" href="#unshaped-edge" id="ref-for-unshaped-edge">unshaped edge</a> terms for easier cross-referencing of those concepts. (<a href="https://github.com/w3c/csswg-drafts/issues/5132">Issue 5132</a>) </ul> Changes since the <a href="https://www.w3.org/TR/2022/WD-css-box-4-20221103/">3 November 2022 Working Draft</a> include: <ul> <li data-md> Removing the effect of <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim⑤">margin-trim</a> on floats, because there are use cases for both trimming and not trimming their margins, and it is complicated to implement. (<a href="https://github.com/w3c/csswg-drafts/issues/8547">Issue 8547</a>) <li data-md> Clarifying that only descendant margins are trimmed by <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim⑥">margin-trim</a> even if self or sibling margins would have collapsed with the trimmed margin. <li data-md> Introducing terms for the <a data-link-type="dfn" href="#shaped-edge" id="ref-for-shaped-edge①">shaped</a> and <a data-link-type="dfn" href="#unshaped-edge" id="ref-for-unshaped-edge①">unshaped</a> <a data-link-type="dfn" href="#box-box-edge" id="ref-for-box-box-edge④">edges</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑤">box</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5132">Issue 5132</a>) </ul> <h2 class="heading settled" data-level="7" id="changes-since-3">7. Changes Since CSS Level 3<a class="self-link" href="#changes-since-3"></a></h2> The following changes have been made to this module since <a href="https://www.w3.org/TR/css-box-3/">Level 3</a>: <ul> <li>Adding the <a class="property css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim⑦">margin-trim</a> property. </ul> <h2 class="heading settled" data-level="8" id="changes-since-2">8. Changes Since CSS Level 2<a class="self-link" href="#changes-since-2"></a></h2> The following changes have been made to this module since <a href="https://www.w3.org/TR/CSS2/box.html">Level 2</a>: <ul> <li>Adapting the prose slightly to account for vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a>. <li>Defining the applicability of <a class="property css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin⑧">margin</a>, <a class="property css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑧">padding</a> and their longhands to <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box④">ruby base containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box④">ruby annotation containers</a> </ul> <h2 class="heading settled" data-level="9" id="priv">9. Privacy Considerations<a class="self-link" href="#priv"></a></h2> No privacy considerations have been reported on this module. <h2 class="heading settled" data-level="10" id="sec">10. Security Considerations<a class="self-link" href="#sec"></a></h2> No security considerations have been reported on this module. </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="#valdef-margin-trim-block">block</a>, in § 3.3 <li><a href="#valdef-margin-trim-block-end">block-end</a>, in § 3.3 <li><a href="#valdef-margin-trim-block-start">block-start</a>, in § 3.3 <li><a href="#border">border</a>, in § 5 <li><a href="#border-area">border area</a>, in § 2 <li><a href="#border-box">border box</a>, in § 2.1 <li><a href="#valdef-box-border-box">border-box</a>, in § 2.3 <li><a href="#border-edge">border edge</a>, in § 2.1 <li><a href="#border-properties">border properties</a>, in § 5 <li><a href="#typedef-box"><box></a>, in § 2.3 <li><a href="#box-box-edge">box edge</a>, in § 2.1 <li><a href="#content-area">content area</a>, in § 2 <li><a href="#content-box">content box</a>, in § 2.1 <li><a href="#valdef-box-content-box">content-box</a>, in § 2.3 <li><a href="#content-edge">content edge</a>, in § 2.1 <li><a href="#typedef-coord-box"><coord-box></a>, in § 2.3 <li><a href="#box-box-edge">edge</a>, in § 2.1 <li><a href="#valdef-box-fill-box">fill-box</a>, in § 2.3 <li><a href="#valdef-margin-trim-inline">inline</a>, in § 3.3 <li><a href="#valdef-margin-trim-inline-end">inline-end</a>, in § 3.3 <li><a href="#valdef-margin-trim-inline-start">inline-start</a>, in § 3.3 <li><a href="#inner-edge">inner edge</a>, in § 2.1 <li><a href="#typedef-layout-box"><layout-box></a>, in § 2.3 <li> margin <ul> <li><a href="#propdef-margin">(property)</a>, in § 3.2 <li><a href="#margin">definition of</a>, in § 3 </ul> <li><a href="#margin-area">margin area</a>, in § 2 <li><a href="#propdef-margin-bottom">margin-bottom</a>, in § 3.1 <li><a href="#margin-box">margin box</a>, in § 2.1 <li><a href="#valdef-box-margin-box">margin-box</a>, in § 2.3 <li><a href="#margin-edge">margin edge</a>, in § 2.1 <li><a href="#propdef-margin-left">margin-left</a>, in § 3.1 <li><a href="#margin-properties">margin properties</a>, in § 3 <li><a href="#propdef-margin-right">margin-right</a>, in § 3.1 <li><a href="#propdef-margin-top">margin-top</a>, in § 3.1 <li><a href="#propdef-margin-trim">margin-trim</a>, in § 3.3 <li><a href="#valdef-margin-trim-none">none</a>, in § 3.3 <li><a href="#svg-viewport-origin-box">origin box</a>, in § 2.3 <li><a href="#outer-edge">outer edge</a>, in § 2.1 <li><a href="#padding">Padding</a>, in § 4 <li><a href="#propdef-padding">padding</a>, in § 4.2 <li><a href="#padding-area">padding area</a>, in § 2 <li><a href="#propdef-padding-bottom">padding-bottom</a>, in § 4.1 <li><a href="#padding-box">padding box</a>, in § 2.1 <li><a href="#valdef-box-padding-box">padding-box</a>, in § 2.3 <li><a href="#padding-edge">padding edge</a>, in § 2.1 <li><a href="#propdef-padding-left">padding-left</a>, in § 4.1 <li><a href="#padding-properties">padding properties</a>, in § 4 <li><a href="#propdef-padding-right">padding-right</a>, in § 4.1 <li><a href="#propdef-padding-top">padding-top</a>, in § 4.1 <li><a href="#typedef-paint-box"><paint-box></a>, in § 2.3 <li><a href="#shaped-edge">shaped border edge</a>, in § 2.1 <li><a href="#shaped-edge">shaped content edge</a>, in § 2.1 <li><a href="#shaped-edge">shaped edge</a>, in § 2.1 <li><a href="#shaped-edge">shaped margin edge</a>, in § 2.1 <li><a href="#shaped-edge">shaped padding edge</a>, in § 2.1 <li><a href="#valdef-box-stroke-box">stroke-box</a>, in § 2.3 <li><a href="#svg-viewport-origin-box">SVG viewport origin box</a>, in § 2.3 <li><a href="#unshaped-edge">unshaped border edge</a>, in § 2.1 <li><a href="#unshaped-edge">unshaped content edge</a>, in § 2.1 <li><a href="#unshaped-edge">unshaped edge</a>, in § 2.1 <li><a href="#unshaped-edge">unshaped margin edge</a>, in § 2.1 <li><a href="#unshaped-edge">unshaped padding edge</a>, in § 2.1 <li><a href="#valdef-box-view-box">view-box</a>, in § 2.3 <li><a href="#typedef-visual-box"><visual-box></a>, in § 2.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>background <li>background-clip <li>background-origin <li>border <li>border-radius </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment <li>box-decoration-break <li>fragmentation break <li>fragmentation context <li>margin-break </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>longhand <li>longhand property <li>shorthand property </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>block container <li>block layout <li>block-level <li>box <li>box tree <li>containing block <li>element tree <li>in-flow <li>inline-level <li>internal table element <li>replaced element </ul> <li> <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms: <ul> <li>collapsed flex item <li>cross axis <li>flex container <li>flex item <li>flex line <li>main axis </ul> <li> <a data-link-type="biblio">[CSS-GRID-2]</a> defines the following terms: <ul> <li>collapsed grid track <li>grid container <li>grid item <li>grid track </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-2]</a> defines the following terms: <ul> <li>multi-column container </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::first-letter <li>::first-line </ul> <li> <a data-link-type="biblio">[CSS-RUBY-1]</a> defines the following terms: <ul> <li>ruby annotation container <li>ruby base container </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>sizing property </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li>transform-box </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><length-percentage> <li>CSS-wide keywords <li>{A,B} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>flow-relative <li>inline-axis <li>logical width <li>physical <li>writing mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>canvas </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>object bounding box <li>stroke bounding box <li>SVG viewports </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-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-align/"><cite>CSS Box Alignment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a> <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-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</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-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-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-flexbox-1/">https://drafts.csswg.org/css-flexbox-1/</a> <dt id="biblio-css-grid-1">[CSS-GRID-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-grid/"><cite>CSS Grid Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-grid/">https://drafts.csswg.org/css-grid/</a> <dt id="biblio-css-grid-2">[CSS-GRID-2] <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://drafts.csswg.org/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-grid-2/">https://drafts.csswg.org/css-grid-2/</a> <dt id="biblio-css-logical-1">[CSS-LOGICAL-1] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-logical-1/"><cite>CSS Logical Properties and Values Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2] <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol-2/"><cite>CSS Multi-column Layout Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-multicol-2/">https://drafts.csswg.org/css-multicol-2/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-ruby-1">[CSS-RUBY-1] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-ruby-1/"><cite>CSS Ruby Annotation Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-ruby-1/">https://drafts.csswg.org/css-ruby-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-transforms-1">[CSS-TRANSFORMS-1] <dd>Simon Fraser; et al. <a href="https://drafts.csswg.org/css-transforms/"><cite>CSS Transforms Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-transforms/">https://drafts.csswg.org/css-transforms/</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-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-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> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://svgwg.org/svg2-draft/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. URL: <a href="https://svgwg.org/svg2-draft/">https://svgwg.org/svg2-draft/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</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-margin" id="ref-for-propdef-margin⑨">margin</a> <td><'margin-top'>{1,4} <td>0 <td>all elements except internal table elements, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom②">margin-bottom</a> <td><length-percentage> | auto <td>0 <td>all elements except internal table elements, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>the keyword auto or a computed <length-percentage> value <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-left" id="ref-for-propdef-margin-left②">margin-left</a> <td><length-percentage> | auto <td>0 <td>all elements except internal table elements, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>the keyword auto or a computed <length-percentage> value <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-right" id="ref-for-propdef-margin-right②">margin-right</a> <td><length-percentage> | auto <td>0 <td>all elements except internal table elements, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>the keyword auto or a computed <length-percentage> value <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-top" id="ref-for-propdef-margin-top③">margin-top</a> <td><length-percentage> | auto <td>0 <td>all elements except internal table elements, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>the keyword auto or a computed <length-percentage> value <td>margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim⑧">margin-trim</a> <td>none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ] <td>none <td>block containers, multi-column containers, flex containers, grid containers <td>no <td>N/A <td>discrete <td>per grammar <td>a set of zero to four keywords indicating which sides to trim <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑨">padding</a> <td><'padding-top'>{1,4} <td>0 <td>all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom②">padding-bottom</a> <td><length-percentage [0,∞]> <td>0 <td>all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>a computed <length-percentage> value <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-left" id="ref-for-propdef-padding-left②">padding-left</a> <td><length-percentage [0,∞]> <td>0 <td>all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>a computed <length-percentage> value <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-right" id="ref-for-propdef-padding-right②">padding-right</a> <td><length-percentage [0,∞]> <td>0 <td>all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>a computed <length-percentage> value <td>padding <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-top" id="ref-for-propdef-padding-top③">padding-top</a> <td><length-percentage [0,∞]> <td>0 <td>all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers <td>no <td>refer to logical width of containing block <td>by computed value type <td>per grammar <td>a computed <length-percentage> value <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"> Define how this property affects margins at breaks if the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context">fragmentation context</a>. See also <a href="https://github.com/w3c/csswg-drafts/issues/3314">Issue 3314</a>. <a class="issue-return" href="#issue-c93b5c6f" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="margin-trim"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim" title="The margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges.">margin-trim</a> In only one current engine. <div class="support"> FirefoxNoneSafari16.4+ChromeNone <hr> Opera?EdgeNone <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </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 = { "00439ff7": {"dfnID":"00439ff7","dfnText":"flex line","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-line"},{"id":"ref-for-flex-line\u2460"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-line"}, "03f3b228": {"dfnID":"03f3b228","dfnText":"ruby base container","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-base-container-box"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2460"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2461"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2462"}],"title":"4.2. Padding Shorthand: the padding property"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2463"}],"title":"8. Changes Since CSS Level 2"}],"url":"https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box"}, "0cab481d": {"dfnID":"0cab481d","dfnText":"box-decoration-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-decoration-break"}],"title":"2.2. Fragmentation"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break"}, "0fcbe446": {"dfnID":"0fcbe446","dfnText":"margin-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-break"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-margin-break"}, "1044d688": {"dfnID":"1044d688","dfnText":"grid item","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-item"}],"title":"3.3.3. \nTrimming Grid Container Content"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-item"}, "18222566": {"dfnID":"18222566","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"},{"id":"ref-for-typedef-length-percentage\u2460"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2461"},{"id":"ref-for-typedef-length-percentage\u2462"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "19d42a6f": {"dfnID":"19d42a6f","dfnText":"stroke bounding box","external":true,"refSections":[{"refs":[{"id":"ref-for-TermStrokeBoundingBox"}],"title":"2.3. Box-edge Keywords"}],"url":"https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox"}, "24285d87": {"dfnID":"24285d87","dfnText":"flex container","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-container"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-flex-container\u2460"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "2a2f1579": {"dfnID":"2a2f1579","dfnText":"canvas","external":true,"refSections":[{"refs":[{"id":"ref-for-canvas"}],"title":"1. Introduction"}],"url":"https://www.w3.org/TR/CSS21/intro.html#canvas"}, "2ebd6278": {"dfnID":"2ebd6278","dfnText":"ruby annotation container","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-annotation-container-box"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2460"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2461"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2462"}],"title":"4.2. Padding Shorthand: the padding property"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2463"}],"title":"8. Changes Since CSS Level 2"}],"url":"https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box"}, "31ccd1a9": {"dfnID":"31ccd1a9","dfnText":"longhand property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"},{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-longhand\u2462"},{"id":"ref-for-longhand\u2463"},{"id":"ref-for-longhand\u2464"}],"title":"4. Padding"},{"refs":[{"id":"ref-for-longhand\u2465"}],"title":"5. Borders"}],"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"}, "396d5070": {"dfnID":"396d5070","dfnText":"multi-column container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-multicol-2/#multi-column-container"}, "3b1682d5": {"dfnID":"3b1682d5","dfnText":"background-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-origin"}],"title":"4. Padding"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "45ea65d2": {"dfnID":"45ea65d2","dfnText":"SVG viewports","external":true,"refSections":[{"refs":[{"id":"ref-for-TermSVGViewport"},{"id":"ref-for-TermSVGViewport\u2460"},{"id":"ref-for-TermSVGViewport\u2461"},{"id":"ref-for-TermSVGViewport\u2462"}],"title":"2.3. Box-edge Keywords"}],"url":"https://svgwg.org/svg2-draft/coords.html#TermSVGViewport"}, "5eff29c1": {"dfnID":"5eff29c1","dfnText":"flow-relative","external":true,"refSections":[{"refs":[{"id":"ref-for-flow-relative"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-flow-relative\u2460"}],"title":"4. Padding"},{"refs":[{"id":"ref-for-flow-relative\u2461"}],"title":"5. Borders"}],"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":"2.1. Boxes and Edges"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius"}, "6458a3ef": {"dfnID":"6458a3ef","dfnText":"fragmentation break","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-break"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-fragmentation-break\u2460"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-break"}, "66c521a7": {"dfnID":"66c521a7","dfnText":"flex item","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-item"},{"id":"ref-for-flex-item\u2460"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "67df723c": {"dfnID":"67df723c","dfnText":"collapsed grid track","external":true,"refSections":[{"refs":[{"id":"ref-for-collapsed-grid-track"}],"title":"3.3.3. \nTrimming Grid Container Content"}],"url":"https://drafts.csswg.org/css-grid-2/#collapsed-grid-track"}, "6d0d9897": {"dfnID":"6d0d9897","dfnText":"internal table element","external":true,"refSections":[{"refs":[{"id":"ref-for-internal-table-element"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-internal-table-element\u2460"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-internal-table-element\u2461"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-internal-table-element\u2462"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"https://drafts.csswg.org/css-display-4/#internal-table-element"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"2.3. Box-edge Keywords"},{"refs":[{"id":"ref-for-comb-one\u2465"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "75bfa627": {"dfnID":"75bfa627","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-line"}],"title":"1.2. \nModule Interactions"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "79b8b44f": {"dfnID":"79b8b44f","dfnText":"grid track","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-track"},{"id":"ref-for-grid-track\u2460"}],"title":"3.3.3. \nTrimming Grid Container Content"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-track"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"3.3.1. \nTrimming Block Container Content"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "881c2f72": {"dfnID":"881c2f72","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"},{"id":"ref-for-box\u2460"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-box\u2461"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-box\u2462"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-box\u2463"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-box\u2464"}],"title":"6. Recent Changes"}],"url":"https://drafts.csswg.org/css-display-4/#box"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"},{"id":"ref-for-comb-any\u2461"},{"id":"ref-for-comb-any\u2462"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8ca0c013": {"dfnID":"8ca0c013","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-shorthand-property\u2460"}],"title":"4. Padding"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "8f96f376": {"dfnID":"8f96f376","dfnText":"inline-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"3.3.1. \nTrimming Block Container Content"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-axis"}, "8feba1a1": {"dfnID":"8feba1a1","dfnText":"logical width","external":true,"refSections":[{"refs":[{"id":"ref-for-logical-width"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-logical-width\u2460"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-logical-width\u2461"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-logical-width\u2462"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#logical-width"}, "938ba280": {"dfnID":"938ba280","dfnText":"{A,B}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-mult-num-range\u2460"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "99cabd32": {"dfnID":"99cabd32","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"},{"id":"ref-for-in-flow\u2460"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "9b0fa0e9": {"dfnID":"9b0fa0e9","dfnText":"background-clip","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-clip"}],"title":"2.3. Box-edge Keywords"},{"refs":[{"id":"ref-for-propdef-background-clip\u2460"}],"title":"4. Padding"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9e066e76": {"dfnID":"9e066e76","dfnText":"longhand","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"},{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-longhand\u2462"},{"id":"ref-for-longhand\u2463"},{"id":"ref-for-longhand\u2464"}],"title":"4. Padding"},{"refs":[{"id":"ref-for-longhand\u2465"}],"title":"5. Borders"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "9ea20e44": {"dfnID":"9ea20e44","dfnText":"element tree","external":true,"refSections":[{"refs":[{"id":"ref-for-element-tree"},{"id":"ref-for-element-tree\u2460"}],"title":"1. Introduction"}],"url":"https://drafts.csswg.org/css-display-4/#element-tree"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"},{"id":"ref-for-block-container\u2461"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-block-container\u2462"}],"title":"3.3.1. \nTrimming Block Container Content"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a0e35b6d": {"dfnID":"a0e35b6d","dfnText":"sizing property","external":true,"refSections":[{"refs":[{"id":"ref-for-sizing-property"}],"title":"1. Introduction"}],"url":"https://drafts.csswg.org/css-sizing-3/#sizing-property"}, "a1addf6c": {"dfnID":"a1addf6c","dfnText":"::first-letter","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-letter"}],"title":"1.2. \nModule Interactions"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "a1cb86c7": {"dfnID":"a1cb86c7","dfnText":"transform-box","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform-box"}],"title":"2.3. Box-edge Keywords"}],"url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform-box"}, "a270c80d": {"dfnID":"a270c80d","dfnText":"fragmentation context","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-context"}],"title":"3.3. Margins at Container Edges: the margin-trim property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"8. Changes Since CSS Level 2"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"2. The CSS Box Model"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "a8882f90": {"dfnID":"a8882f90","dfnText":"collapsed flex item","external":true,"refSections":[{"refs":[{"id":"ref-for-collapsed-flex-item"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#collapsed-flex-item"}, "a9734ee4": {"dfnID":"a9734ee4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-propdef-border\u2460"}],"title":"2. The CSS Box Model"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "border": {"dfnID":"border","dfnText":"Borders","external":false,"refSections":[],"url":"#border"}, "border-area": {"dfnID":"border-area","dfnText":"border","external":false,"refSections":[{"refs":[{"id":"ref-for-border-area"},{"id":"ref-for-border-area\u2460"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-border-area\u2461"}],"title":"4. Padding"},{"refs":[{"id":"ref-for-border-area\u2462"},{"id":"ref-for-border-area\u2463"}],"title":"5. Borders"}],"url":"#border-area"}, "border-box": {"dfnID":"border-box","dfnText":"border box","external":false,"refSections":[{"refs":[{"id":"ref-for-border-box"}],"title":"2.2. Fragmentation"},{"refs":[{"id":"ref-for-border-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#border-box"}, "border-edge": {"dfnID":"border-edge","dfnText":"border edge","external":false,"refSections":[{"refs":[{"id":"ref-for-border-edge"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-border-edge\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#border-edge"}, "border-properties": {"dfnID":"border-properties","dfnText":"border properties","external":false,"refSections":[],"url":"#border-properties"}, "box-box-edge": {"dfnID":"box-box-edge","dfnText":"edge","external":false,"refSections":[{"refs":[{"id":"ref-for-box-box-edge"},{"id":"ref-for-box-box-edge\u2460"},{"id":"ref-for-box-box-edge\u2461"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-box-box-edge\u2462"}],"title":"3.3.3. \nTrimming Grid Container Content"},{"refs":[{"id":"ref-for-box-box-edge\u2463"}],"title":"6. Recent Changes"}],"url":"#box-box-edge"}, "c3bd6e1d": {"dfnID":"c3bd6e1d","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"}],"title":"2.2. Fragmentation"}],"url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "content-area": {"dfnID":"content-area","dfnText":"content area","external":false,"refSections":[{"refs":[{"id":"ref-for-content-area"},{"id":"ref-for-content-area\u2460"},{"id":"ref-for-content-area\u2461"}],"title":"2.1. Boxes and Edges"}],"url":"#content-area"}, "content-box": {"dfnID":"content-box","dfnText":"content box","external":false,"refSections":[{"refs":[{"id":"ref-for-content-box"}],"title":"2.2. Fragmentation"},{"refs":[{"id":"ref-for-content-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#content-box"}, "content-edge": {"dfnID":"content-edge","dfnText":"content edge","external":false,"refSections":[{"refs":[{"id":"ref-for-content-edge"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-content-edge\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#content-edge"}, "d3f841bc": {"dfnID":"d3f841bc","dfnText":"cross axis","external":true,"refSections":[{"refs":[{"id":"ref-for-cross-axis"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#cross-axis"}, "d7fa3e1c": {"dfnID":"d7fa3e1c","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"}],"title":"3.3.1. \nTrimming Block Container Content"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "d9c76793": {"dfnID":"d9c76793","dfnText":"physical","external":true,"refSections":[{"refs":[{"id":"ref-for-physical"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-physical\u2460"}],"title":"4. Padding"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#physical"}, "df19338c": {"dfnID":"df19338c","dfnText":"box tree","external":true,"refSections":[{"refs":[{"id":"ref-for-box-tree"}],"title":"1. Introduction"}],"url":"https://drafts.csswg.org/css-display-4/#box-tree"}, "e7b3aa1a": {"dfnID":"e7b3aa1a","dfnText":"main axis","external":true,"refSections":[{"refs":[{"id":"ref-for-main-axis"}],"title":"3.3.2. \nTrimming Flex Container Content"}],"url":"https://drafts.csswg.org/css-flexbox-1/#main-axis"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"2.1. Boxes and Edges"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "eaa4fbeb": {"dfnID":"eaa4fbeb","dfnText":"block layout","external":true,"refSections":[{"refs":[{"id":"ref-for-block-layout"}],"title":"3. Margins"}],"url":"https://drafts.csswg.org/css-display-4/#block-layout"}, "f005b2f6": {"dfnID":"f005b2f6","dfnText":"grid container","external":true,"refSections":[{"refs":[{"id":"ref-for-grid-container"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-grid-container\u2460"}],"title":"3.3.3. \nTrimming Grid Container Content"}],"url":"https://drafts.csswg.org/css-grid-2/#grid-container"}, "f5eca8c9": {"dfnID":"f5eca8c9","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"2. The CSS Box Model"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "ff72fec7": {"dfnID":"ff72fec7","dfnText":"object bounding box","external":true,"refSections":[{"refs":[{"id":"ref-for-TermObjectBoundingBox"}],"title":"2.3. Box-edge Keywords"}],"url":"https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox"}, "inner-edge": {"dfnID":"inner-edge","dfnText":"inner edge","external":false,"refSections":[],"url":"#inner-edge"}, "margin": {"dfnID":"margin","dfnText":"Margins","external":false,"refSections":[{"refs":[{"id":"ref-for-margin"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"}],"url":"#margin"}, "margin-area": {"dfnID":"margin-area","dfnText":"margin areas","external":false,"refSections":[{"refs":[{"id":"ref-for-margin-area"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-margin-area\u2460"}],"title":"3. Margins"}],"url":"#margin-area"}, "margin-box": {"dfnID":"margin-box","dfnText":"margin box","external":false,"refSections":[{"refs":[{"id":"ref-for-margin-box"}],"title":"2.2. Fragmentation"},{"refs":[{"id":"ref-for-margin-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#margin-box"}, "margin-edge": {"dfnID":"margin-edge","dfnText":"margin edge","external":false,"refSections":[{"refs":[{"id":"ref-for-margin-edge"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-margin-edge\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#margin-edge"}, "margin-properties": {"dfnID":"margin-properties","dfnText":"margin properties","external":false,"refSections":[],"url":"#margin-properties"}, "outer-edge": {"dfnID":"outer-edge","dfnText":"outer edge","external":false,"refSections":[],"url":"#outer-edge"}, "padding": {"dfnID":"padding","dfnText":"Padding","external":false,"refSections":[{"refs":[{"id":"ref-for-padding"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"}],"url":"#padding"}, "padding-area": {"dfnID":"padding-area","dfnText":"padding","external":false,"refSections":[{"refs":[{"id":"ref-for-padding-area"},{"id":"ref-for-padding-area\u2460"},{"id":"ref-for-padding-area\u2461"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-padding-area\u2462"}],"title":"4. Padding"}],"url":"#padding-area"}, "padding-box": {"dfnID":"padding-box","dfnText":"padding box","external":false,"refSections":[{"refs":[{"id":"ref-for-padding-box"}],"title":"2.2. Fragmentation"},{"refs":[{"id":"ref-for-padding-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#padding-box"}, "padding-edge": {"dfnID":"padding-edge","dfnText":"padding edge","external":false,"refSections":[{"refs":[{"id":"ref-for-padding-edge"}],"title":"2.1. Boxes and Edges"},{"refs":[{"id":"ref-for-padding-edge\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#padding-edge"}, "padding-properties": {"dfnID":"padding-properties","dfnText":"padding properties","external":false,"refSections":[],"url":"#padding-properties"}, "propdef-margin": {"dfnID":"propdef-margin","dfnText":"margin","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-propdef-margin\u2460"},{"id":"ref-for-propdef-margin\u2461"},{"id":"ref-for-propdef-margin\u2462"}],"title":"3. Margins"},{"refs":[{"id":"ref-for-propdef-margin\u2463"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-propdef-margin\u2464"},{"id":"ref-for-propdef-margin\u2465"},{"id":"ref-for-propdef-margin\u2466"}],"title":"3.2. Margin Shorthand: the margin property"},{"refs":[{"id":"ref-for-propdef-margin\u2467"}],"title":"8. Changes Since CSS Level 2"}],"url":"#propdef-margin"}, "propdef-margin-bottom": {"dfnID":"propdef-margin-bottom","dfnText":"margin-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-propdef-margin-bottom\u2460"}],"title":"3.2. Margin Shorthand: the margin property"}],"url":"#propdef-margin-bottom"}, "propdef-margin-left": {"dfnID":"propdef-margin-left","dfnText":"margin-left","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-propdef-margin-left\u2460"}],"title":"3.2. Margin Shorthand: the margin property"}],"url":"#propdef-margin-left"}, "propdef-margin-right": {"dfnID":"propdef-margin-right","dfnText":"margin-right","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-propdef-margin-right\u2460"}],"title":"3.2. Margin Shorthand: the margin property"}],"url":"#propdef-margin-right"}, "propdef-margin-top": {"dfnID":"propdef-margin-top","dfnText":"margin-top","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"}],"title":"3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties"},{"refs":[{"id":"ref-for-propdef-margin-top\u2460"},{"id":"ref-for-propdef-margin-top\u2461"}],"title":"3.2. Margin Shorthand: the margin property"}],"url":"#propdef-margin-top"}, "propdef-margin-trim": {"dfnID":"propdef-margin-trim","dfnText":"margin-trim","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-trim"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-propdef-margin-trim\u2460"}],"title":"3.3.1. \nTrimming Block Container Content"},{"refs":[{"id":"ref-for-propdef-margin-trim\u2461"}],"title":"3.3.2. \nTrimming Flex Container Content"},{"refs":[{"id":"ref-for-propdef-margin-trim\u2462"}],"title":"3.3.3. \nTrimming Grid Container Content"},{"refs":[{"id":"ref-for-propdef-margin-trim\u2463"},{"id":"ref-for-propdef-margin-trim\u2464"},{"id":"ref-for-propdef-margin-trim\u2465"}],"title":"6. Recent Changes"},{"refs":[{"id":"ref-for-propdef-margin-trim\u2466"}],"title":"7. Changes Since CSS Level 3"}],"url":"#propdef-margin-trim"}, "propdef-padding": {"dfnID":"propdef-padding","dfnText":"padding","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-propdef-padding\u2460"},{"id":"ref-for-propdef-padding\u2461"},{"id":"ref-for-propdef-padding\u2462"}],"title":"4. Padding"},{"refs":[{"id":"ref-for-propdef-padding\u2463"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-propdef-padding\u2464"},{"id":"ref-for-propdef-padding\u2465"},{"id":"ref-for-propdef-padding\u2466"}],"title":"4.2. Padding Shorthand: the padding property"},{"refs":[{"id":"ref-for-propdef-padding\u2467"}],"title":"8. Changes Since CSS Level 2"}],"url":"#propdef-padding"}, "propdef-padding-bottom": {"dfnID":"propdef-padding-bottom","dfnText":"padding-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-bottom"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-propdef-padding-bottom\u2460"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"#propdef-padding-bottom"}, "propdef-padding-left": {"dfnID":"propdef-padding-left","dfnText":"padding-left","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-left"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-propdef-padding-left\u2460"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"#propdef-padding-left"}, "propdef-padding-right": {"dfnID":"propdef-padding-right","dfnText":"padding-right","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-right"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-propdef-padding-right\u2460"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"#propdef-padding-right"}, "propdef-padding-top": {"dfnID":"propdef-padding-top","dfnText":"padding-top","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-top"}],"title":"4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties"},{"refs":[{"id":"ref-for-propdef-padding-top\u2460"},{"id":"ref-for-propdef-padding-top\u2461"}],"title":"4.2. Padding Shorthand: the padding property"}],"url":"#propdef-padding-top"}, "shaped-edge": {"dfnID":"shaped-edge","dfnText":"shaped edge","external":false,"refSections":[{"refs":[{"id":"ref-for-shaped-edge"},{"id":"ref-for-shaped-edge\u2460"}],"title":"6. Recent Changes"}],"url":"#shaped-edge"}, "svg-viewport-origin-box": {"dfnID":"svg-viewport-origin-box","dfnText":"origin box","external":false,"refSections":[{"refs":[{"id":"ref-for-svg-viewport-origin-box"}],"title":"2.3. Box-edge Keywords"}],"url":"#svg-viewport-origin-box"}, "typedef-box": {"dfnID":"typedef-box","dfnText":"<box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-box"},{"id":"ref-for-typedef-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#typedef-box"}, "typedef-coord-box": {"dfnID":"typedef-coord-box","dfnText":"<coord-box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-coord-box"}],"title":"2.3. Box-edge Keywords"}],"url":"#typedef-coord-box"}, "typedef-layout-box": {"dfnID":"typedef-layout-box","dfnText":"<layout-box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-layout-box"}],"title":"2.3. Box-edge Keywords"}],"url":"#typedef-layout-box"}, "typedef-paint-box": {"dfnID":"typedef-paint-box","dfnText":"<paint-box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-paint-box"},{"id":"ref-for-typedef-paint-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#typedef-paint-box"}, "typedef-visual-box": {"dfnID":"typedef-visual-box","dfnText":"<visual-box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-visual-box"},{"id":"ref-for-typedef-visual-box\u2460"},{"id":"ref-for-typedef-visual-box\u2461"}],"title":"2.3. Box-edge Keywords"}],"url":"#typedef-visual-box"}, "unshaped-edge": {"dfnID":"unshaped-edge","dfnText":"unshaped edge","external":false,"refSections":[{"refs":[{"id":"ref-for-unshaped-edge"},{"id":"ref-for-unshaped-edge\u2460"}],"title":"6. Recent Changes"}],"url":"#unshaped-edge"}, "valdef-box-border-box": {"dfnID":"valdef-box-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-box-border-box"},{"id":"ref-for-valdef-box-border-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#valdef-box-border-box"}, "valdef-box-content-box": {"dfnID":"valdef-box-content-box","dfnText":"content-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-box-content-box"}],"title":"2.3. Box-edge Keywords"}],"url":"#valdef-box-content-box"}, "valdef-box-fill-box": {"dfnID":"valdef-box-fill-box","dfnText":"fill-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-box-fill-box"},{"id":"ref-for-valdef-box-fill-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#valdef-box-fill-box"}, "valdef-box-margin-box": {"dfnID":"valdef-box-margin-box","dfnText":"margin-box","external":false,"refSections":[],"url":"#valdef-box-margin-box"}, "valdef-box-padding-box": {"dfnID":"valdef-box-padding-box","dfnText":"padding-box","external":false,"refSections":[],"url":"#valdef-box-padding-box"}, "valdef-box-stroke-box": {"dfnID":"valdef-box-stroke-box","dfnText":"stroke-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-box-stroke-box"},{"id":"ref-for-valdef-box-stroke-box\u2460"}],"title":"2.3. Box-edge Keywords"}],"url":"#valdef-box-stroke-box"}, "valdef-box-view-box": {"dfnID":"valdef-box-view-box","dfnText":"view-box","external":false,"refSections":[],"url":"#valdef-box-view-box"}, "valdef-margin-trim-block": {"dfnID":"valdef-margin-trim-block","dfnText":"block","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-margin-trim-block"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-valdef-margin-trim-block\u2460"}],"title":"6. Recent Changes"}],"url":"#valdef-margin-trim-block"}, "valdef-margin-trim-block-end": {"dfnID":"valdef-margin-trim-block-end","dfnText":"block-end","external":false,"refSections":[],"url":"#valdef-margin-trim-block-end"}, "valdef-margin-trim-block-start": {"dfnID":"valdef-margin-trim-block-start","dfnText":"block-start","external":false,"refSections":[],"url":"#valdef-margin-trim-block-start"}, "valdef-margin-trim-inline": {"dfnID":"valdef-margin-trim-inline","dfnText":"inline","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-margin-trim-inline"}],"title":"3.3. Margins at Container Edges: the margin-trim property"},{"refs":[{"id":"ref-for-valdef-margin-trim-inline\u2460"}],"title":"6. Recent Changes"}],"url":"#valdef-margin-trim-inline"}, "valdef-margin-trim-inline-end": {"dfnID":"valdef-margin-trim-inline-end","dfnText":"inline-end","external":false,"refSections":[],"url":"#valdef-margin-trim-inline-end"}, "valdef-margin-trim-inline-start": {"dfnID":"valdef-margin-trim-inline-start","dfnText":"inline-start","external":false,"refSections":[],"url":"#valdef-margin-trim-inline-start"}, "valdef-margin-trim-none": {"dfnID":"valdef-margin-trim-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-margin-trim-none"}, }; 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 = { "#typedef-box": "Expands to: border-box | content-box | fill-box | margin-box | padding-box | stroke-box | view-box", "#typedef-coord-box": "Expands to: border-box | content-box | fill-box | padding-box | stroke-box | view-box", "#typedef-layout-box": "Expands to: border-box | content-box | margin-box | padding-box", "#typedef-paint-box": "Expands to: border-box | content-box | fill-box | padding-box | stroke-box", "#typedef-visual-box": "Expands to: border-box | content-box | padding-box", }; 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 = { "#border-area": {"displayText":"border area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"border area","type":"dfn","url":"#border-area"}, "#border-box": {"displayText":"border box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"border box","type":"dfn","url":"#border-box"}, "#border-edge": {"displayText":"border edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"border edge","type":"dfn","url":"#border-edge"}, "#box-box-edge": {"displayText":"edge","export":true,"for_":["box"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"edge","type":"dfn","url":"#box-box-edge"}, "#content-area": {"displayText":"content area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"content area","type":"dfn","url":"#content-area"}, "#content-box": {"displayText":"content box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"content box","type":"dfn","url":"#content-box"}, "#content-edge": {"displayText":"content edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"content edge","type":"dfn","url":"#content-edge"}, "#margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin","type":"dfn","url":"#margin"}, "#margin-area": {"displayText":"margin area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin area","type":"dfn","url":"#margin-area"}, "#margin-box": {"displayText":"margin box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin box","type":"dfn","url":"#margin-box"}, "#margin-edge": {"displayText":"margin edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin edge","type":"dfn","url":"#margin-edge"}, "#padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding","type":"dfn","url":"#padding"}, "#padding-area": {"displayText":"padding area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding area","type":"dfn","url":"#padding-area"}, "#padding-box": {"displayText":"padding box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding box","type":"dfn","url":"#padding-box"}, "#padding-edge": {"displayText":"padding edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding edge","type":"dfn","url":"#padding-edge"}, "#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin","type":"property","url":"#propdef-margin"}, "#propdef-margin-bottom": {"displayText":"margin-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin-bottom","type":"property","url":"#propdef-margin-bottom"}, "#propdef-margin-left": {"displayText":"margin-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin-left","type":"property","url":"#propdef-margin-left"}, "#propdef-margin-right": {"displayText":"margin-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin-right","type":"property","url":"#propdef-margin-right"}, "#propdef-margin-top": {"displayText":"margin-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin-top","type":"property","url":"#propdef-margin-top"}, "#propdef-margin-trim": {"displayText":"margin-trim","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"margin-trim","type":"property","url":"#propdef-margin-trim"}, "#propdef-padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding","type":"property","url":"#propdef-padding"}, "#propdef-padding-bottom": {"displayText":"padding-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding-bottom","type":"property","url":"#propdef-padding-bottom"}, "#propdef-padding-left": {"displayText":"padding-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding-left","type":"property","url":"#propdef-padding-left"}, "#propdef-padding-right": {"displayText":"padding-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding-right","type":"property","url":"#propdef-padding-right"}, "#propdef-padding-top": {"displayText":"padding-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"padding-top","type":"property","url":"#propdef-padding-top"}, "#shaped-edge": {"displayText":"shaped edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"shaped edge","type":"dfn","url":"#shaped-edge"}, "#svg-viewport-origin-box": {"displayText":"origin box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"origin box","type":"dfn","url":"#svg-viewport-origin-box"}, "#typedef-box": {"displayText":"<box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"<box>","type":"type","url":"#typedef-box"}, "#typedef-coord-box": {"displayText":"<coord-box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"<coord-box>","type":"type","url":"#typedef-coord-box"}, "#typedef-layout-box": {"displayText":"<layout-box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"<layout-box>","type":"type","url":"#typedef-layout-box"}, "#typedef-paint-box": {"displayText":"<paint-box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"<paint-box>","type":"type","url":"#typedef-paint-box"}, "#typedef-visual-box": {"displayText":"<visual-box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"<visual-box>","type":"type","url":"#typedef-visual-box"}, "#unshaped-edge": {"displayText":"unshaped edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"unshaped edge","type":"dfn","url":"#unshaped-edge"}, "#valdef-box-border-box": {"displayText":"border-box","export":true,"for_":["<box>","<coord-box>","<geometry-box>","<layout-box>","<paint-box>","<shape-box>","<visual-box>"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"border-box","type":"value","url":"#valdef-box-border-box"}, "#valdef-box-content-box": {"displayText":"content-box","export":true,"for_":["<box>","<coord-box>","<geometry-box>","<layout-box>","<paint-box>","<shape-box>","<visual-box>"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"content-box","type":"value","url":"#valdef-box-content-box"}, "#valdef-box-fill-box": {"displayText":"fill-box","export":true,"for_":["<box>","<coord-box>","<geometry-box>","<paint-box>"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"fill-box","type":"value","url":"#valdef-box-fill-box"}, "#valdef-box-stroke-box": {"displayText":"stroke-box","export":true,"for_":["<box>","<coord-box>","<geometry-box>","<paint-box>"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"stroke-box","type":"value","url":"#valdef-box-stroke-box"}, "#valdef-margin-trim-block": {"displayText":"block","export":true,"for_":["margin-trim"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"block","type":"value","url":"#valdef-margin-trim-block"}, "#valdef-margin-trim-inline": {"displayText":"inline","export":true,"for_":["margin-trim"],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"local","text":"inline","type":"value","url":"#valdef-margin-trim-inline"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background": {"displayText":"background","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip": {"displayText":"background-clip","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-clip","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin": {"displayText":"background-origin","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-origin","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border": {"displayText":"border","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "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-break-4/#box-fragment": {"displayText":"box fragment","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"box fragment","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "https://drafts.csswg.org/css-break-4/#fragmentation-break": {"displayText":"fragmentation break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-break"}, "https://drafts.csswg.org/css-break-4/#fragmentation-context": {"displayText":"fragmentation context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation context","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break": {"displayText":"box-decoration-break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"box-decoration-break","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break"}, "https://drafts.csswg.org/css-break-4/#propdef-margin-break": {"displayText":"margin-break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"margin-break","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-margin-break"}, "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/#shorthand-property": {"displayText":"shorthand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"shorthand property","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#block-layout": {"displayText":"block layout","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block layout","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-layout"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "https://drafts.csswg.org/css-display-4/#box": {"displayText":"box","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box"}, "https://drafts.csswg.org/css-display-4/#box-tree": {"displayText":"box tree","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box tree","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box-tree"}, "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-display-4/#element-tree": {"displayText":"element tree","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"element tree","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#element-tree"}, "https://drafts.csswg.org/css-display-4/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"in-flow","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "https://drafts.csswg.org/css-display-4/#inline-level": {"displayText":"inline-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "https://drafts.csswg.org/css-display-4/#internal-table-element": {"displayText":"internal table element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"internal table element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#internal-table-element"}, "https://drafts.csswg.org/css-display-4/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "https://drafts.csswg.org/css-flexbox-1/#collapsed-flex-item": {"displayText":"collapsed flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"collapsed flex item","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#collapsed-flex-item"}, "https://drafts.csswg.org/css-flexbox-1/#cross-axis": {"displayText":"cross axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"cross axis","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#cross-axis"}, "https://drafts.csswg.org/css-flexbox-1/#flex-container": {"displayText":"flex container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex container","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "https://drafts.csswg.org/css-flexbox-1/#flex-item": {"displayText":"flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex item","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "https://drafts.csswg.org/css-flexbox-1/#flex-line": {"displayText":"flex line","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex line","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-line"}, "https://drafts.csswg.org/css-flexbox-1/#main-axis": {"displayText":"main axis","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"main axis","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#main-axis"}, "https://drafts.csswg.org/css-grid-2/#collapsed-grid-track": {"displayText":"collapsed grid track","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"collapsed grid track","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#collapsed-grid-track"}, "https://drafts.csswg.org/css-grid-2/#grid-container": {"displayText":"grid container","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid container","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-container"}, "https://drafts.csswg.org/css-grid-2/#grid-item": {"displayText":"grid item","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid item","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-item"}, "https://drafts.csswg.org/css-grid-2/#grid-track": {"displayText":"grid track","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"current","text":"grid track","type":"dfn","url":"https://drafts.csswg.org/css-grid-2/#grid-track"}, "https://drafts.csswg.org/css-multicol-2/#multi-column-container": {"displayText":"multi-column container","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-multicol","spec":"css-multicol-2","status":"current","text":"multi-column container","type":"dfn","url":"https://drafts.csswg.org/css-multicol-2/#multi-column-container"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter": {"displayText":"::first-letter","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-letter","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line": {"displayText":"::first-line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-line","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box": {"displayText":"ruby annotation container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"current","text":"ruby annotation container","type":"dfn","url":"https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box"}, "https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box": {"displayText":"ruby base container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"current","text":"ruby base container","type":"dfn","url":"https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box"}, "https://drafts.csswg.org/css-sizing-3/#sizing-property": {"displayText":"sizing property","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"sizing property","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#sizing-property"}, "https://drafts.csswg.org/css-transforms-1/#propdef-transform-box": {"displayText":"transform-box","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"current","text":"transform-box","type":"property","url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform-box"}, "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/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length-percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "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-axis": {"displayText":"inline-axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-axis","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-axis"}, "https://drafts.csswg.org/css-writing-modes-4/#logical-width": {"displayText":"logical width","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"logical width","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#logical-width"}, "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/#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://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox": {"displayText":"object bounding box","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"object bounding box","type":"dfn","url":"https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox"}, "https://svgwg.org/svg2-draft/coords.html#TermSVGViewport": {"displayText":"SVG viewports","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"svg viewports","type":"dfn","url":"https://svgwg.org/svg2-draft/coords.html#TermSVGViewport"}, "https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox": {"displayText":"stroke bounding box","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"stroke bounding box","type":"dfn","url":"https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox"}, "https://www.w3.org/TR/CSS21/intro.html#canvas": {"displayText":"canvas","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"current","text":"canvas","type":"dfn","url":"https://www.w3.org/TR/CSS21/intro.html#canvas"}, }; 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 ref = refsData[url]; 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>