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 Display Module Level 3</title> <meta content="CR" name="w3c-status"> <meta content="Bikeshed version f043d3484, updated Fri Feb 17 10:53:48 2023 -0800" name="generator"> <link href="https://www.w3.org/TR/css-display-3/" rel="canonical"> <meta content="70cd35cf40df68f7167f30747ec7750636288b2e" name="document-revision"> <style> .code-and-figure { display: table; margin: 0 auto; border-spacing: 1em; } .code-and-figure > div { display: table-cell; vertical-align: middle; } .code-and-figure img { background: transparent; } </style> <style> #display-value-summary td, #display-value-summary th { text-align: left; } </style> <style> #order-example { display:flex; flex-flow: column; margin: 0 auto 1em; color: black; background: white; max-width: 250px; padding: 0 1rem; text-align: left; border: thick solid; } #order-example > h1 { color: black; } #order-example > img { order: -1; align-self: center; max-width: 100%; margin-inline: -1em; } </style> <style>/* 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; } </style> <style>/* 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>/* style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } .dfn-panel { position: absolute; z-index: 35; width: 20em; min-width: min-content; max-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 > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0; } .dfn-panel li { list-style: inside; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled { cursor: pointer; } </style> <style>/* style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* 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>/* 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>/* style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-CR" rel="stylesheet"> <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 Display Module Level 3</h1> <a href="https://www.w3.org/standards/types#CR">W3C Candidate Recommendation Snapshot</a>, <time class="dt-updated" datetime="2023-03-30">30 March 2023</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://www.w3.org/TR/2023/CR-css-display-3-20230330/">https://www.w3.org/TR/2023/CR-css-display-3-20230330/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-display-3">https://www.w3.org/standards/history/css-display-3</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-display?label=master&label=experimental&aligned">https://wpt.fyi/results/css/css-display?label=master&label=experimental&aligned</a> <dt>Test Suites: <dd><a href="http://test.csswg.org/suites/css-display-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-display-3_dev/nightly-unstable/</a> <dd class="wpt-overview"><a href="https://wpt.fyi/results/css/css-flexbox/">https://wpt.fyi/results/css/css-flexbox/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-display-3">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (Google) <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> (Invited Expert) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-display-3/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2023 <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/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This module describes how the CSS formatting box tree is generated from the document element tree and defines the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display">display</a> property that controls it. <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. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a Candidate Recommendation Snapshot using the <a href="https://www.w3.org/2021/Process-20211102/#recs-and-notes">Recommendation track</a>. Publication as a Candidate Recommendation does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. A Candidate Recommendation Snapshot has received <a href="https://www.w3.org/2021/Process-20211102/#dfn-wide-review">wide review</a>, is intended to gather implementation experience, and has commitments from Working Group members to <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Requirements">royalty-free licensing</a> for implementations. This document is intended to become a W3C Recommendation; it will remain a Candidate Recommendation at least until <time class="status-deadline" datetime="2023-05-30">30 May 2023</time> to gather additional feedback. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-display” in the title, like this: “[css-display] …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-display%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 W3C Process Document</a>. This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. A <a href="http://test.csswg.org/harness/results/css-display-3_dev/grouped/">preliminary implementation report</a> is available. Further tests will be added during the CR period. </div> <div data-fill-with="at-risk"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>Application of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> in the presence of run-ins <li><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①">display: run-in</a> <li>All multi-keyword values of <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②">display</a> </ul> “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. </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="#placement">1.1 Module interactions</a> <li><a href="#values">1.2 Value Definitions</a> </ol> <li> <a href="#the-display-properties">2 Box Layout Modes: the display property</a> <ol class="toc"> <li><a href="#outer-role">2.1 Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#inner-model">2.2 Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#list-items">2.3 Generating Marker Boxes: the list-item keyword</a> <li><a href="#layout-specific-display">2.4 Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#box-generation">2.5 Box Generation: the none and contents keywords</a> <li><a href="#legacy-display">2.6 Precomposed Inline-level Display Values</a> <li><a href="#transformations">2.7 Automatic Box Type Transformations</a> <li><a href="#root">2.8 The Root Element’s Principal Box</a> </ol> <li> <a href="#order-property">3 Display Order: the order property</a> <ol class="toc"> <li><a href="#order-accessibility">3.1 Reordering and Accessibility</a> </ol> <li><a href="#visibility">4 Invisibility: the visibility property</a> <li><a href="#run-in-layout">5 Run-In Layout</a> <li><a href="#glossary"> Appendix A: Glossary</a> <li> <a href="#unbox"> Appendix B: Effects of display: contents on Unusual Elements</a> <ol class="toc"> <li><a href="#unbox-html"> HTML Elements</a> <li><a href="#unbox-svg"> SVG Elements</a> <li><a href="#unbox-mathml"> MathML Elements</a> </ol> <li><a href="#box-guidelines"> Appendix C: Box Construction Guidelines for Spec Authors</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-2020"> Changes Since 2020 Candidate Recommendation</a> <li><a href="#changes-2019"> Changes Since 2019 Candidate Recommendation</a> <li><a href="#changes-wd"> Changes Prior to Candidate Recommendation Status</a> </ol> <li> <a href="#priv"> Privacy Considerations</a> <ol class="toc"> <li><a href="#sec"> Security Considerations</a> <li><a href="#security-privacy-self-review"> Self-Review Questionaire</a> </ol> <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> <li><a href="#w3c-cr-exit-criteria"> CR exit criteria</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> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This section is normative. CSS takes a source document organized as a <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="element tree" id="element-tree">tree</dfn> of <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-lt="element" data-noexport id="elements">elements</dfn> (which can contain a mix of other <a data-link-type="dfn" href="#elements" id="ref-for-elements">elements</a> and <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes">text nodes</a>) and <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="text node" id="text-nodes">text nodes</dfn> (which can contain text), and renders it onto a <a href="https://www.w3.org/TR/CSS2/intro.html#canvas">canvas</a> such as your screen, a piece of paper, or an audio stream. Although any such source document can be rendered with CSS, the most commonly used type is the DOM. <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a> (Some of these more complex tree types might have additional types of nodes, such as the comment nodes in the DOM. For the purposes of CSS, all of these additional types of nodes are ignored, as if they didn’t exist.) To do this, it generates an intermediary structure, the <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="box-tree">box tree</dfn>, which represents the formatting structure of the rendered document. Each <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="box">box</dfn> in the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree">box tree</a> represents its corresponding <a data-link-type="dfn" href="#elements" id="ref-for-elements①">element</a> (or <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a>) in space and/or time on the canvas, while each <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-text-sequence">text sequence</dfn> in the box tree likewise represents the corresponding contents of its <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes①">text nodes</a>. To create the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree②">box tree</a>, CSS first uses <a href="https://www.w3.org/TR/css-cascade/">cascading and inheritance</a>, to assign a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value">computed value</a> for each CSS property to each <a data-link-type="dfn" href="#elements" id="ref-for-elements②">element</a> and <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes②">text node</a> in the source tree. (See <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">[CSS-CASCADE-3]</a>.) Then, for each <a data-link-type="dfn" href="#elements" id="ref-for-elements③">element</a>, CSS generates zero or more <a data-link-type="dfn" href="#box" id="ref-for-box">boxes</a> as specified by that element’s <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display③">display</a> property. Typically, an element generates a single box, the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box">principal box</a>, which represents itself and contains its contents in the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree③">box tree</a>. However, some display values (e.g. display: list-item) generate more than one box (e.g. a <a href="https://www.w3.org/TR/CSS2/visuren.html#principal-box">principal block box</a> and a child <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a>). And some values (such as <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none">none</a> or <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents">contents</a>) cause the element and/or its descendants to not generate any boxes at all. Boxes are often referred to by their display type—e.g. a box generated by an element with display: block is called a “block box” or just a “block”. A <a data-link-type="dfn" href="#box" id="ref-for-box⑤">box</a> is assigned the same styles as its generating <a data-link-type="dfn" href="#elements" id="ref-for-elements⑤">element</a>, unless otherwise indicated. In general, <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#inherited-property" id="ref-for-inherited-property">inherited properties</a> are assigned to the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①">principal box</a>, and then inherit through the box tree to any other boxes generated by the same element. Non-inherited properties default to applying to the principal box, but when the element generates multiple boxes, are sometimes defined to apply to a different box: for example, the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> properties applied to a table element are applied to its <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-grid-box" id="ref-for-table-grid-box">table grid box</a>, not to its principal <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box">table wrapper box</a>. If the value computation process alters the styles of those boxes, and the element’s style is requested (such as through <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle">getComputedStyle()</a></code>), the element reflects, for each property, the value from the box to which that property was applied. Similarly, each contiguous sequence of sibling <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes③">text nodes</a> generates a <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence">text sequence</a> containing their text contents, which is assigned the same styles as the generating text nodes. If the sequence contains no text, however, it does not generate a text sequence. In constructing the box tree, boxes generated by an element are descendants of the principal box of any ancestor elements. In the general case, the direct <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-parent-box">parent box</dfn> of an element’s <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box④">principal box</a> is the principal box of its nearest ancestor element that generates a <a data-link-type="dfn" href="#box" id="ref-for-box⑥">box</a>; however, there are some exceptions, such as for <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in">run-in</a> boxes, display types (like tables) that generate multiple container boxes, and intervening <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous">anonymous boxes</a>. An <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="anonymous|anonymous box" id="anonymous">anonymous box</dfn> is a box that is not associated with any element. <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous①">Anonymous boxes</a> are generated in certain circumstances to fix up the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree④">box tree</a> when it requires a particular nested structure that is not provided by the boxes generated from the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree">element tree</a>. For example, a <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table cell box</a> requires a particular type of parent box (the <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a>), and will generate an anonymous <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a> around itself if its parent is not a <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a>. (See <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> § <a href="https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">17.2.1</a>.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) <a href="https://www.w3.org/TR/css-cascade/#inheriting">inherit</a> through their box tree parentage. In the course of layout, <a data-link-type="dfn" href="#box" id="ref-for-box⑦">boxes</a> and <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence②">text sequences</a> can be broken into multiple <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-3/#fragment" id="ref-for-fragment">fragments</a>. This happens, for example, when an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box">inline box</a> and/or text sequence is broken across lines, or when a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box">block box</a> is broken across pages or columns, in a process called <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#fragmentation" id="ref-for-fragmentation">fragmentation</a>. It can also happen due to bidi reordering of text (see <a href="https://www.w3.org/TR/css-writing-modes-3/#bidi-algo">Applying the Bidirectional Reordering Algorithm</a> in <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">CSS Writing Modes</a>) or higher-level <a data-link-type="dfn" href="#display-type" id="ref-for-display-type">display type</a> box splitting, e.g. <a href="https://www.w3.org/TR/CSS2/visuren.html#img-anon-block">block-in-inline splitting</a> (see <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">CSS2§9.2</a>) or <a href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">column-spanner-in-block</a> splitting (see <a href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">CSS Multi-column Layout</a>). A box therefore consists of one or more <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>, and a text sequence consists of one or more text fragments. See <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> for more information on fragmentation. Note: Many of the CSS specs were written before this terminology was ironed out, or refer to things incorrectly, so view older specs with caution when they’re using these terms. It should be possible to infer from context which term they really mean. Please <a href="#sotd">report errors</a> in specs when you find them, so they can be corrected. Note: Further information on the “aural” box tree and its interaction with the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑧">display</a> property can be found in the <a href="https://www.w3.org/TR/css-speech-1/#aural-model">CSS Speech Module</a>. <a data-link-type="biblio" href="#biblio-css-speech-1" title="CSS Speech Module Level 1">[CSS-SPEECH-1]</a> <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module interactions<a class="self-link" href="#placement"></a></h3> This module replaces and extends the definition of the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑨">display</a> property defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> section 9.2.4. None of the properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements. <h3 class="heading settled" data-level="1.2" id="values">1.2. 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://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="the-display-properties">2. Box Layout Modes: the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①⓪">display</a> property<a class="self-link" href="#the-display-properties"></a></h2> <table class="def propdef" data-link-for-hint="display"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-display">display</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="#typedef-display-outside" id="ref-for-typedef-display-outside" title="Expands to: block | inline | run-in"><display-outside></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside" title="Expands to: flex | flow | flow-root | grid | ruby | table"><display-inside></a> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-display-listitem" id="ref-for-typedef-display-listitem" title="Expands to: list-item"><display-listitem></a> | <a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal" title="Expands to: ruby-base | ruby-base-container | ruby-text | ruby-text-container | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group"><display-internal></a> | <a class="production css" data-link-type="type" href="#typedef-display-box" id="ref-for-typedef-display-box" title="Expands to: contents | none"><display-box></a> | <a class="production css" data-link-type="type" href="#typedef-display-legacy" id="ref-for-typedef-display-legacy" title="Expands to: inline-block | inline-flex | inline-grid | inline-table"><display-legacy></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>inline <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</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 pair of keywords representing the <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type">inner</a> and <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type">outer</a> display types plus optional <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item">list-item</a> flag, or a <a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal①" title="Expands to: ruby-base | ruby-base-container | ruby-text | ruby-text-container | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group"><display-internal></a> or <a class="production css" data-link-type="type" href="#typedef-display-box" id="ref-for-typedef-display-box①" title="Expands to: contents | none"><display-box></a> keyword; see prose in a variety of specs for computation rules <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>not animatable </table> User agents are expected to support this property on all media, including non-visual ones. The <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①①">display</a> property defines an element’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="display-type">display type</dfn>, which consists of the two basic qualities of how an element generates boxes: <ul> <li data-md> the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="inner" id="inner-display-type">inner display type</dfn>, which defines (if it is a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element">non-replaced element</a>) the kind of <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context">formatting context</a> it generates, dictating how its descendant boxes are laid out. (The inner display of a replaced element is outside the scope of CSS.) <li data-md> the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="outer" id="outer-display-type">outer display type</dfn>, which dictates how the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑥">principal box</a> itself participates in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout">flow layout</a>. </ul> <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence⑤">Text sequences</a> have no <a data-link-type="dfn" href="#display-type" id="ref-for-display-type①">display type</a>. Some <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①②">display</a> values have additional side-effects: such as <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item①">list-item</a>, which also generates a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker">::marker</a> pseudo-element, and <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none①">none</a>, which causes the element’s entire subtree to be left out of the box tree. <div class="advisement"> The <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①③">display</a> property has no effect on an element’s semantics: these are defined by the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#document-language" id="ref-for-document-language">document language</a> and are not affected by CSS. Aside from the <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none②">none</a> value, which also affects the aural/speech output <a data-link-type="biblio" href="#biblio-css-speech-1" title="CSS Speech Module Level 1">[CSS-SPEECH-1]</a> and interactivity of an element and its descendants, the display property only affects visual layout: its purpose is to allow designers freedom to change the layout behavior of an element without affecting the underlying document semantics. </div> Values are defined as follows: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-outside"><display-outside></dfn> = block <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> inline <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> run-in <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-inside"><display-inside></dfn> = flow <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> flow-root <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> table <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> flex <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> grid <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> ruby <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-listitem"><display-listitem></dfn> = <a class="production" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside①" title="Expands to: block | inline | run-in"><display-outside></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> [ flow <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> flow-root ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> list-item <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-internal"><display-internal></dfn> = table-row-group <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> table-header-group <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> table-footer-group <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> table-row <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> table-cell <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> table-column-group <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> table-column <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> table-caption <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> ruby-base <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> ruby-text <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> ruby-base-container <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> ruby-text-container <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-box"><display-box></dfn> = contents <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> none <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-legacy"><display-legacy></dfn> = inline-block <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> inline-table <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> inline-flex <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> inline-grid </pre> The following informative table summarizes the values of <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①⑤">display</a>: <table class="data" id="display-value-summary"> <thead> <tr> <th>Short <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①⑥">display</a> <th>Full <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①⑦">display</a> <th>Generated box <tbody title="Box Suppression Display Types"> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none③">none</a> <td>— <td>subtree omitted from <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑦">box tree</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents①">contents</a> <td>— <td>element replaced by contents in <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑧">box tree</a> <tbody title="Flow Layout Display Types"> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block">block</a> <td>block flow <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level">block-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container">block container</a> <abbr title="also known as">aka</abbr> <a data-link-type="dfn" href="#block-box" id="ref-for-block-box①">block box</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root">flow-root</a> <td>block flow-root <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level①">block-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a> (<a data-link-type="dfn" href="#bfc" id="ref-for-bfc">BFC</a>) <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline">inline</a> <td>inline flow <td><a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box①">inline box</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a> <td>inline flow-root <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level">inline-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container②">block container</a> <abbr title="also known as">aka</abbr> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline block | inline block box" id="inline-block">inline block</dfn> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in①">run-in</a> <td>run-in flow <td><a data-link-type="dfn" href="#run-in" id="ref-for-run-in">run-in box</a> (<a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box②">inline box</a> with special box-tree-munging rules) <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item②">list-item</a> <td>block flow list-item <td><a data-link-type="dfn" href="#block-box" id="ref-for-block-box②">block box</a> with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a> <tr> <td>inline list-item <td>inline flow list-item <td><a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box③">inline box</a> with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a> <tbody title="Formatting Context Root Display Types"> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex">flex</a> <td>block flex <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level②">block-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex container</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex">inline-flex</a> <td>inline flex <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level①">inline-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex container</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid">grid</a> <td>block grid <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level③">block-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container">grid container</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-grid" id="ref-for-valdef-display-inline-grid">inline-grid</a> <td>inline grid <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level②">inline-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container①">grid container</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby">ruby</a> <td>inline ruby <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level③">inline-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container">ruby container</a> <tr> <td>block ruby <td>block ruby <td><a data-link-type="dfn" href="#block-box" id="ref-for-block-box③">block box</a> containing <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container①">ruby container</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table">table</a> <td>block table <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level④">block-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box①">table wrapper box</a> containing <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-grid-box" id="ref-for-table-grid-box①">table grid box</a> <tr> <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a> <td>inline table <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level④">inline-level</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box②">table wrapper box</a> containing <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-grid-box" id="ref-for-table-grid-box②">table grid box</a> <tbody title="Layout-internal display types"> <tr> <td><a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal②" title="Expands to: ruby-base | ruby-base-container | ruby-text | ruby-text-container | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group"><display-internal></a> types <td>— <td><a href="#layout-specific-display">layout-specific internal box</a> </table> Note: Following the precedence rules of “most backwards-compatible, then shortest”, serialization of equivalent <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display①⑧">display</a> values uses the “Short display” column. <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> <h3 class="heading settled" data-level="2.1" id="outer-role">2.1. Outer Display Roles for Flow Layout: the <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block①">block</a>, <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline①">inline</a>, and <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in②">run-in</a> keywords<a class="self-link" href="#outer-role"></a></h3> The <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside②" title="Expands to: block | inline | run-in"><display-outside></a> keywords specify the element’s <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type①">outer display type</a>, which is essentially its <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑦">principal box’s</a> role in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout①">flow layout</a>. They are defined as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-block">block</dfn> <dd> The element generates a box that is <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export data-lt="block-level box" id="block-level-box">block-level</dfn> when placed in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout②">flow layout</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-inline">inline</dfn> <dd> The element generates a box that is <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export data-lt="inline-level box" id="inline-level-box">inline-level</dfn> when placed in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout③">flow layout</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-run-in">run-in</dfn> <dd> The element generates an <a data-link-type="dfn" href="#run-in" id="ref-for-run-in①">run-in box</a>, which is a type of <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box">inline-level box</a> with special behavior that attempts to merge it into a subsequent block container. See <a href="#run-in-layout">§ 5 Run-In Layout</a> for details. </dl> Note: <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type②">Outer display types</a> do affect <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element②">replaced elements</a>. If a <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside③" title="Expands to: block | inline | run-in"><display-outside></a> value is specified but <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside①" title="Expands to: flex | flow | flow-root | grid | ruby | table"><display-inside></a> is omitted, the element’s <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①">inner display type</a> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow">flow</a>. <h3 class="heading settled" data-level="2.2" id="inner-model">2.2. Inner Display Layout Models: the <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow①">flow</a>, <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root①">flow-root</a>, <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table①">table</a>, <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex①">flex</a>, <a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid①">grid</a>, and <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby①">ruby</a> keywords<a class="self-link" href="#inner-model"></a></h3> The <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside②" title="Expands to: flex | flow | flow-root | grid | ruby | table"><display-inside></a> keywords specify the element’s <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type②">inner display type</a>, which defines the type of formatting context that lays out its contents (assuming it is a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element③">non-replaced element</a>). They are defined as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flow">flow</dfn> <dd> The element lays out its contents using <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="flow-layout">flow layout</dfn> (<a href="https://www.w3.org/TR/CSS2/visuren.html">block-and-inline layout</a>). If its <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type③">outer display type</a> is <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline②">inline</a> or <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in③">run-in</a>, and it is participating in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①">block</a> or <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context">inline</a> formatting context, then it generates an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box④">inline box</a>. Otherwise it generates a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container③">block container</a> box. Depending on the value of other properties (such as <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float">float</a>, or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a>) and whether it is itself participating in a block or inline <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①">formatting context</a>, it either establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②">block formatting context</a> for its contents or integrates its contents into its parent formatting context. See <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS2.1 Chapter 9</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> A <a data-link-type="dfn" href="#block-container" id="ref-for-block-container④">block container</a> that establishes a new block formatting context is considered to have a used <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type③">inner display type</a> of <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root②">flow-root</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flow-root">flow-root</dfn> <dd> The element generates a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑤">block container</a> box, and lays out its contents using <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout④">flow layout</a>. It always establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context④">block formatting context</a> for its contents. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-table">table</dfn> <dd> The element generates a principal <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box③">table wrapper box</a> that establishes a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑤">block formatting context</a>, and which contains an additionally-generated <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-grid-box" id="ref-for-table-grid-box③">table grid box</a> that establishes a <a data-link-type="dfn">table formatting context</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flex">flex</dfn> <dd> The element generates a principal <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex container</a> box and establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context">flex formatting context</a>. <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-grid">grid</dfn> <dd> The element generates a principal <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container②">grid container</a> box, and establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-formatting-context" id="ref-for-grid-formatting-context">grid formatting context</a>. <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> (Grids using <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-grid-2/#valdef-grid-template-rows-subgrid" id="ref-for-valdef-grid-template-rows-subgrid">subgrid</a> might not generate a new <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-formatting-context" id="ref-for-grid-formatting-context①">grid formatting context</a>; see <a data-link-type="biblio" href="#biblio-css-grid-2" title="CSS Grid Layout Module Level 2">[CSS-GRID-2]</a> for details.) <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-ruby">ruby</dfn> <dd> The element generates a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container②">ruby container</a> box and establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context">ruby formatting context</a> in addition to integrating its base-level contents into its parent <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context③">formatting context</a> (if it is inline) or generating a wrapper box of the appropriate <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type④">outer display type</a> (if it is not). <a data-link-type="biblio" href="#biblio-css-ruby-1" title="CSS Ruby Annotation Layout Module Level 1">[CSS-RUBY-1]</a> </dl> If a <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside③" title="Expands to: flex | flow | flow-root | grid | ruby | table"><display-inside></a> value is specified but <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside④" title="Expands to: block | inline | run-in"><display-outside></a> is omitted, the element’s <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑤">outer display type</a> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block②">block</a>—except for <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby②">ruby</a>, which defaults to <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline③">inline</a>. <h3 class="heading settled" data-level="2.3" id="list-items">2.3. Generating Marker Boxes: the <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item③">list-item</a> keyword<a class="self-link" href="#list-items"></a></h3> The <dfn class="dfn-paneled css" data-dfn-for="display, <display-listitem>" data-dfn-type="value" data-export id="valdef-display-list-item">list-item</dfn> keyword causes the element to generate a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①">::marker</a> pseudo-element <a data-link-type="biblio" href="#biblio-css-pseudo-4" title="CSS Pseudo-Elements Module Level 4">[CSS-PSEUDO-4]</a> with the content specified by its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-list-style" id="ref-for-propdef-list-style">list-style</a> properties (<a href="https://www.w3.org/TR/CSS2/generate.html#lists">CSS 2.1§12.5 Lists</a>) <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> together with a principal box of the specified type for its own contents. If no <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type④">inner display type</a> value is specified, the principal box’s inner display type defaults to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow②">flow</a>. If no <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑥">outer display type</a> value is specified, the principal box’s outer display type defaults to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block③">block</a>. Note: In this level, as restricted in the grammar, list-items are limited to the <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout⑤">Flow Layout</a> display types (<a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block④">block</a>/<a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline④">inline</a>/<a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in④">run-in</a> with <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow③">flow</a>/<a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root③">flow-root</a> inner types). This restriction may be relaxed in a future level of this module. <h3 class="heading settled" data-level="2.4" id="layout-specific-display">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords<a class="self-link" href="#layout-specific-display"></a></h3> Some layout models, such as <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table②">table</a> and <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby③">ruby</a>, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those “<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="layout-internal">layout-internal</dfn>” <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②⓪">display</a> values, which only have meaning within that particular layout mode. Unless otherwise specified, both the <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑥">inner display type</a> and the <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑧">outer display type</a> of elements using these <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②①">display</a> values are set to the given keyword. When the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②②">display</a> property of a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element④">replaced element</a> computes to one of the <a data-link-type="dfn" href="#layout-internal" id="ref-for-layout-internal">layout-internal</a> values, it is handled as having a used value of <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline⑤">inline</a>. White space collapsing and anonymous box generation must happen around those replaced elements based on that inline value, as if they never had a layout-internal display value applied to them. Authors should not assign a <a data-link-type="dfn" href="#layout-internal" id="ref-for-layout-internal②">layout-internal</a> display value to <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element⑤">replaced elements</a>. The <a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal③" title="Expands to: ruby-base | ruby-base-container | ruby-text | ruby-text-container | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group"><display-internal></a> keywords are defined as follows: <dl> <dt><dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-row-group">table-row-group<a class="self-link" href="#valdef-display-table-row-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-header-group">table-header-group<a class="self-link" href="#valdef-display-table-header-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-footer-group">table-footer-group<a class="self-link" href="#valdef-display-table-footer-group"></a></dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-row">table-row</dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-cell">table-cell</dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-column-group">table-column-group<a class="self-link" href="#valdef-display-table-column-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-column">table-column<a class="self-link" href="#valdef-display-table-column"></a></dfn> <dd> The element is an <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="internal-table-element">internal table element</dfn>. It generates the appropriate <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-table-box">internal table box<a class="self-link" href="#internal-table-box"></a></dfn> which participates in a <a data-link-type="dfn">table formatting context</a>. See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2§17.2</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell">table-cell</a> boxes have a <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root④">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑦">inner display type</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-caption">table-caption</dfn> <dd> The element generates a <dfn data-dfn-for data-dfn-type="dfn" data-export id="table-caption-box">table caption box<a class="self-link" href="#table-caption-box"></a></dfn>, which is a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box④">block box</a> with special behavior with respect to table and table wrapper boxes. See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2§17.2</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <a class="css" data-link-type="maybe" href="#valdef-display-table-caption" id="ref-for-valdef-display-table-caption">table-caption</a> boxes have a <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑤">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑧">inner display type</a>. <dt> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-base">ruby-base</dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-text">ruby-text</dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-base-container">ruby-base-container<a class="self-link" href="#valdef-display-ruby-base-container"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-text-container">ruby-text-container<a class="self-link" href="#valdef-display-ruby-text-container"></a></dfn> <dd> The element is an <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-ruby-element">internal ruby element<a class="self-link" href="#internal-ruby-element"></a></dfn>. It generates the appropriate <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-ruby-box">internal ruby box<a class="self-link" href="#internal-ruby-box"></a></dfn> which participates in a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context①">ruby formatting context</a>. <a data-link-type="biblio" href="#biblio-css-ruby-1" title="CSS Ruby Annotation Layout Module Level 1">[CSS-RUBY-1]</a> <a class="css" data-link-type="maybe" href="#valdef-display-ruby-base" id="ref-for-valdef-display-ruby-base">ruby-base</a> and <a class="css" data-link-type="maybe" href="#valdef-display-ruby-text" id="ref-for-valdef-display-ruby-text">ruby-text</a> have a <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow④">flow</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑨">inner display type</a>. </dl> Boxes with layout-specific display types generate anonymous wrapper boxes around themselves when placed in an incompatible parent, as defined by their respective specifications. <div class="example" id="example-d11b97c3"> <a class="self-link" href="#example-d11b97c3"></a> For example, Table Layout requires that a <a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell①">table-cell</a> box must have a <a class="css" data-link-type="maybe" href="#valdef-display-table-row" id="ref-for-valdef-display-table-row">table-row</a> parent box. If it is misparented, like so: <pre class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:block;"</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-cell"</c-><c- p>></c->...<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> It will generate wrapper boxes around itself, producing a structure like: <pre>block box └anonymous table box └anonymous table-row-group box └anonymous table-row box └table-cell box </pre> Even if the parent is another <a data-link-type="dfn" href="#internal-table-element" id="ref-for-internal-table-element">internal table element</a>, if it’s not the correct one, wrapper boxes will be generated. For example, in the following markup: <pre class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table;"</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-row"</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-cell"</c-><c- p>></c->...<c- p></</c-><c- f>div</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> Anonymous wrapper box generation will produce: <pre>table box └anonymous table-row-group box └table-row box └table-cell box </pre> This "fix-up" ensures that table layout has a predictable structure to operate on. </div> <h3 class="heading settled" data-level="2.5" id="box-generation">2.5. Box Generation: the <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none④">none</a> and <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents②">contents</a> keywords<a class="self-link" href="#box-generation"></a></h3> While <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②③">display</a> can control the types of boxes an element will generate, it can also control whether an element will generate any boxes at all. The <a class="production css" data-link-type="type" href="#typedef-display-box" id="ref-for-typedef-display-box②" title="Expands to: contents | none"><display-box></a> keywords are defined as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-box>" data-dfn-type="value" data-export id="valdef-display-contents">contents</dfn> <dd> The element itself does not generate any boxes, but its children and pseudo-elements still generate <a data-link-type="dfn" href="#box" id="ref-for-box⑨">boxes</a> and <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence⑥">text sequences</a> as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree①">element tree</a> by its contents (including both its source-document children and its pseudo-elements, such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-elements, which are generated before/after the element’s children as normal). Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#inheritance" id="ref-for-inheritance">inheritance</a>, are not affected. As of writing, however, <a href="https://github.com/w3c/csswg-drafts/issues/3040">this is not implemented correctly in major browsers</a>, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics. This value computes to <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②④">display: none</a> on replaced elements and other elements whose rendering is not entirely controlled by CSS; see <a href="#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> for details. Note: Replaced elements and form controls are treated specially because removing only the element’s own generating box is a more-or-less undefined operation. As this behavior may be refined if use cases (and more precise rendering models) develop, authors should use <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑤">display: none</a> rather than display: contents on such elements for forward-compatibility. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-box>" data-dfn-type="value" data-export id="valdef-display-none">none</dfn> <dd> The <a data-link-type="dfn" href="#elements" id="ref-for-elements⑥">element</a> and its descendants generate no <a data-link-type="dfn" href="#box" id="ref-for-box①⓪">boxes</a> or <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence⑦">text sequences</a>. Similarly, if a <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes⑤">text node</a> is defined to behave as <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑦">display: none</a>, it generates no <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence⑧">text sequences</a>. </dl> Elements with either of these values do not have <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⓪">inner</a> or <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑨">outer display types</a>, because they don’t generate any boxes at all. Note: As these values cause affected elements to not generate a box, anonymous box generation rules will ignore the elided elements entirely, as if they did not exist in the box tree. Markup-based relationships, however, are not affected by these values, as they are solely rendering-time effects. For example, although they may affect which table cell appears in a column, they do not affect which table cell is associated with a particular column element. Similarly, they cannot affect which HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element" id="ref-for-the-summary-element">summary</a></code> element is associated with a particular table or whether a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element">legend</a></code> is considered to be labelling the contents of a particular <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" id="ref-for-the-fieldset-element">fieldset</a></code>. <h3 class="heading settled" data-level="2.6" id="legacy-display">2.6. Precomposed Inline-level Display Values<a class="self-link" href="#legacy-display"></a></h3> CSS level 2 used a single-keyword syntax for <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②⑧">display</a>, requiring separate keywords for block-level and inline-level variants of the same layout mode. These <a class="production css" data-link-type="type" href="#typedef-display-legacy" id="ref-for-typedef-display-legacy①" title="Expands to: inline-block | inline-flex | inline-grid | inline-table"><display-legacy></a> keywords map as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-block">inline-block</dfn> <dd> Computes to inline flow-root. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-table">inline-table</dfn> <dd> Computes to inline table. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-flex">inline-flex</dfn> <dd> Computes to inline flex. <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-grid">inline-grid</dfn> <dd> Computes to inline grid. </dl> Note: Although these keywords and their equivalents compute to the same value, their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value">specified values</a> remain distinct. Note: The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle①">getComputedStyle()</a></code> serialization rules will always output these precomposed keywords rather than the equivalent two-keyword pairs due to the <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">shortest, most backwards-compatible serialization principle</a>. <h3 class="heading settled" data-level="2.7" id="transformations">2.7. Automatic Box Type Transformations<a class="self-link" href="#transformations"></a></h3> Some layout effects require <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="blockify|blockification" id="blockify">blockification</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inlinify|inlinification" id="inlinify">inlinification</dfn> of the box type, which sets the box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed</a> <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type①⓪">outer display type</a> to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑤">block</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline⑦">inline</a> (respectively). (This has no effect on <a data-link-type="dfn" href="#display-type" id="ref-for-display-type②">display types</a> that generate no box at all, such as <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none⑤">none</a> or <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents③">contents</a>.) Additionally: <ul> <li data-md> If a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑤">block box</a> (block flow) is <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify">inlinified</a>, its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①①">inner display type</a> is set to <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑥">flow-root</a> so that it remains a block container. <li data-md> If an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑤">inline box</a> (inline flow) is <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①">inlinified</a>, it recursively inlinifies all of its in-flow children, so that no block-level descendants break up the inline formatting context in which it participates. <li data-md> For legacy reasons, if an <a data-link-type="dfn" href="#inline-block" id="ref-for-inline-block">inline block box</a> (inline flow-root) is <a data-link-type="dfn" href="#blockify" id="ref-for-blockify">blockified</a>, it becomes a <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑥">block</a> box (losing its <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑦">flow-root</a> nature). For consistency, a run-in flow-root box also blockifies to a block box. <li data-md> If a <a data-link-type="dfn" href="#layout-internal" id="ref-for-layout-internal③">layout-internal</a> box is <a data-link-type="dfn" href="#blockify" id="ref-for-blockify②">blockified</a>, its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①②">inner display type</a> converts to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑤">flow</a> so that it becomes a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑥">block container</a>. <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify③">Inlinification</a> has no effect on layout-internal boxes. (However, placement in such an inline context will typically cause them to be wrapped in an appropriately-typed anonymous inline-level box.) </ul> Note: There are two methods used to fix up box types when a box is mismatched to its context. One is transformation of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed value</a> of <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display②⑨">display</a>, such as <a data-link-type="dfn" href="#blockify" id="ref-for-blockify③">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify④">inlinification</a> described here. The other, taking place during <a href="#intro">box tree construction</a> (after computed values have been determined), is the creation of intermediary anonymous boxes, such as happens in <a href="https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">tables</a>, <a href="https://www.w3.org/TR/css-ruby-1/#box-fixup">ruby</a>, and <a href="https://www.w3.org/TR/CSS21/visuren.html#box-gen">flow</a> layout. <div class="example" id="example-26cc3423"> <a class="self-link" href="#example-26cc3423"></a> Some examples of computed-value fixup include: <ul> <li>Absolute positioning or floating an element <a data-link-type="dfn" href="#blockify" id="ref-for-blockify④">blockifies</a> the box’s display type. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <li>Containment in a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container③">ruby container</a> <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑤">inlinifies</a> the box’s display type, as described in <a data-link-type="biblio" href="#biblio-css-ruby-1" title="CSS Ruby Annotation Layout Module Level 1">[CSS-RUBY-1]</a>. <li>A parent with a <a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid②">grid</a> or <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex②">flex</a> <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display③⓪">display</a> value <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑤">blockifies</a> the box’s display type. <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[CSS-GRID-1]</a> <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a> </ul> </div> <h3 class="heading settled" data-level="2.8" id="root">2.8. The Root Element’s Principal Box<a class="self-link" href="#root"></a></h3> The <a data-link-type="dfn" href="#root-element" id="ref-for-root-element">root element</a>’s display type is always <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑥">blockified</a>, and its <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑧">principal box</a> always establishes an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context">independent formatting context</a>. This box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block">containing block</a> is the <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. Additionally, a <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display③①">display</a> of <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents④">contents</a> computes to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑧">block</a> on the root element. <h2 class="heading settled" data-level="3" id="order-property">3. Display Order: the <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order">order</a> property<a class="self-link" href="#order-property"></a></h2> <table class="def propdef" data-link-for-hint="order"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-order">order</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://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value"><integer></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><a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-item" id="ref-for-grid-item">grid items</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>specified integer <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> Boxes are generally displayed and laid out in the same order as they appear in the source document. In some <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context④">formatting contexts</a>, the <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①">order</a> property can be used to rearrange the order of boxes to deliberately create a divergence of the logical order of elements and their spatial arrangement on the 2D visual canvas. (See <a href="#order-accessibility">§ 3.1 Reordering and Accessibility</a>.) Specifically, the <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order②">order</a> property controls the order in which <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-item" id="ref-for-flex-item①">flex items</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-item" id="ref-for-grid-item①">grid items</a> appear within their container, by assigning them to ordinal groups. It takes a single <dfn class="css" data-dfn-for="order" data-dfn-type="value" data-export id="valdef-order-integer"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value①"><integer></a><a class="self-link" href="#valdef-order-integer"></a></dfn> value, which specifies which ordinal group the item belongs to. <div class="example" id="example-84ef28f3"> <a class="self-link" href="#example-84ef28f3"></a> Here’s an example of a catalog item card which has a title, a photo, and a description. Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order③">order</a> is used to pull the image up from later in the content to the top of the card. <pre class="lang-css highlight">article.sale-item <c- p>{</c-> <c- k>display</c-><c- p>:</c-> flex<c- p>;</c-> <c- k>flex-flow</c-><c- p>:</c-> column<c- p>;</c-> <c- p>}</c-> article.sale-item > img <c- p>{</c-> <c- k>order</c-><c- p>:</c-> <c- m>-1</c-><c- p>;</c-> <c- c>/* Shift image before other content (in layout order) */</c-> align-self: center<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-markup highlight"><c- p><</c-><c- f>article</c-> <c- e>class</c-><c- o>=</c-><c- s>"sale-item"</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->Computer Starter Kit<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->This is the best computer money can buy, if you don’t have much money. <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->Computer <c- p><</c-><c- f>li</c-><c- p>></c->Monitor <c- p><</c-><c- f>li</c-><c- p>></c->Keyboard <c- p><</c-><c- f>li</c-><c- p>></c->Mouse <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"images/computer.jpg"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"You get: a white desktop computer with matching peripherals."</c-><c- p>></c-> <c- p></</c-><c- f>article</c-><c- p>></c-> </pre> <figure> <div id="order-example"> <img alt="You get: a white desktop computer with matching keyboard and monitor." height="188" src="images/computer.jpg" width="250"> <h1 id="quiet-pubrules-1" style="font-size: 1.4em;">Computer Starter Kit</h1> This is the best computer money can buy, if you don’t have much money. <ul> <li>Computer <li>Monitor <li>Keyboard <li>Mouse </ul> </div> <figcaption> An example rendering of the code above. </figcaption> </figure> </div> <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-container" id="ref-for-flex-container③">Flex</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container③">grid containers</a> lay out their contents in <dfn data-dfn-type="dfn" data-export id="order-modified-document-order">order-modified document order<a class="self-link" href="#order-modified-document-order"></a></dfn>, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the <a href="https://www.w3.org/TR/CSS2/zindex.html">painting order</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, exactly as if the <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-item" id="ref-for-flex-item②">flex</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-item" id="ref-for-grid-item②">grid items</a> were reordered in the source document. Absolutely-positioned children of a flex/grid container are treated as having <a class="css" data-link-type="propdesc" href="#propdef-order" id="ref-for-propdef-order④">order: 0</a> for the purpose of determining their painting order relative to flex/grid items. Unless otherwise specified by a future specification, this property has no effect on boxes that are not <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-item" id="ref-for-flex-item④">flex items</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-item" id="ref-for-grid-item④">grid items</a>. <h3 class="heading settled" data-level="3.1" id="order-accessibility">3.1. Reordering and Accessibility<a class="self-link" href="#order-accessibility"></a></h3> The <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order⑤">order</a> property does not affect ordering in non-visual media (such as <a href="https://www.w3.org/TR/css-speech-1/">speech</a>). Likewise, order does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>). Authors must use <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order⑦">order</a> only for spatial, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming. Note: This is so that non-visual media and non-CSS UAs, which typically present content linearly, can rely on a logical source order, while <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order⑨">order</a> is used to tailor the layout order. (Since visual perception is two-dimensional and non-linear, the desired layout order is not always logical.) In order to preserve the author’s intended ordering in all presentation modes, authoring tools—including WYSIWYG editors as well as Web-based authoring aids—must reorder the underlying document source and not use <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①⓪">order</a> to perform reordering unless the author has explicitly indicated that the spatial order should be out-of-sync with the underlying document order (which determines speech and navigation order). <div class="example" id="example-b20b6e0a"> <a class="self-link" href="#example-b20b6e0a"></a> For example, a tool might offer both drag-and-drop reordering of flex items as well as handling of media queries for alternate layouts per screen size range. Since most of the time, reordering should affect all screen ranges as well as navigation and speech order, the tool would perform drag-and-drop reordering at the DOM layer. In some cases, however, the author may want different layouts per screen size. The tool could offer this functionality by using <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①①">order</a> together with media queries, but also tie the smallest screen size’s ordering to the underlying DOM order (since this is most likely to be a logical linear presentation order) while using order to define the visual presentation order in other size ranges. This tool would be conformant, whereas a tool that only ever used <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①③">order</a> to handle drag-and-drop reordering (however convenient it might be to implement it that way) would be non-conformant. </div> Note: User agents, including browsers, accessible technology, and extensions, may offer spatial navigation features. This section does not preclude respecting the <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①④">order</a> property when determining element ordering in such spatial navigation modes; indeed it would need to be considered for such a feature to work. But order is not the only (or even the primary) CSS property that would need to be considered for such a spatial navigation feature. A well-implemented spatial navigation feature would need to consider all the layout features of CSS that modify spatial relationships. <h2 class="heading settled" data-level="4" id="visibility">4. Invisibility: the <a class="property css" data-link-type="property" href="#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> property<a class="self-link" href="#visibility"></a></h2> <table class="def propdef" data-link-for-hint="visibility"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-visibility">visibility</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">visible <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> hidden | collapse <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>visible <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <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>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a class="property css" data-link-type="property" href="#propdef-visibility" id="ref-for-propdef-visibility①">visibility</a> property specifies whether the box is rendered. <a data-link-type="dfn" href="#invisible" id="ref-for-invisible">Invisible</a> boxes still affect layout. (Set the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display③②">display</a> property to <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none⑥">none</a> to suppress box generation altogether.). Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="visibility" data-dfn-type="value" data-export id="valdef-visibility-visible">visible</dfn> <dd> The generated box is visible, as normal. <dt><dfn class="dfn-paneled css" data-dfn-for="visibility" data-dfn-type="value" data-export id="valdef-visibility-hidden">hidden</dfn> <dd> Any boxes generated by the element are <a data-link-type="dfn" href="#invisible" id="ref-for-invisible①">invisible</a>. Descendants of the element can, however, be visible if they have <a class="css" data-link-type="propdesc" href="#propdef-visibility" id="ref-for-propdef-visibility②">visibility: visible</a>. <dt><dfn class="css" data-dfn-for="visibility" data-dfn-type="value" data-export id="valdef-visibility-collapse">collapse<a class="self-link" href="#valdef-visibility-collapse"></a></dfn> <dd> Indicates that the box is <dfn data-dfn-for data-dfn-type="dfn" data-noexport id="collapsed">collapsed<a class="self-link" href="#collapsed"></a></dfn>, which can cause it to take up less space than otherwise in a formatting-context–specific way. See <a href="https://www.w3.org/TR/CSS2/tables.html#dynamic-effects">dynamic row and column effects in tables</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> and <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">collapsed flex items</a> in flex layout <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>. In all other cases, however, (i.e. unless otherwise specified) this simply makes the box <a data-link-type="dfn" href="#invisible" id="ref-for-invisible②">invisible</a>, just like <a class="css" data-link-type="maybe" href="#valdef-visibility-hidden" id="ref-for-valdef-visibility-hidden">hidden</a>. </dl> Note: Currently, many user agents and/or accessibility tools don’t correctly implement the accessibility implications of visible elements with semantic relationships to <a data-link-type="dfn" href="#invisible" id="ref-for-invisible③">invisible</a> elements, so, for example, making parent elements with special roles (such as table rows) invisible while leaving child elements with special roles (such as table cells) visible can be problematic for users of those tools. Authors should avoid creating these situations until the tooling situation improves. <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="invisible">Invisible</dfn> boxes are not rendered (as if they were fully transparent), cannot be interacted with (and behave as if they had <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events">pointer-events: none</a>), are removed from navigation (similar to <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③③">display: none</a>), and are also not rendered to speech (except when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/aural.html#propdef-speak" id="ref-for-propdef-speak">speak</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-speech-1/#valdef-speak-always" id="ref-for-valdef-speak-always">always</a> <a data-link-type="biblio" href="#biblio-css-speech-1" title="CSS Speech Module Level 1">[CSS-SPEECH-1]</a>). However, as with display: contents, their semantic role as a container is not affected, to ensure that any <a class="css" data-link-type="maybe" href="#valdef-visibility-visible" id="ref-for-valdef-visibility-visible">visible</a> descendants are properly interpreted. Note: If <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/aural.html#propdef-speak" id="ref-for-propdef-speak①">speak</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-speech-1/#valdef-speak-always" id="ref-for-valdef-speak-always①">always</a>, an otherwise <a data-link-type="dfn" href="#invisible" id="ref-for-invisible⑤">invisible</a> box is rendered to speech, and may be interacted with using non-visual/spatial methods. <div class="example" id="example-45900d89"> <a class="self-link" href="#example-45900d89"></a> While temporarily hiding things with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑤">display: none</a> is often sufficient, doing so removes the elements from layout entirely, possibly causing unwanted movement or reflow of the page when an element is hidden or shown. <a class="css" data-link-type="propdesc" href="#propdef-visibility" id="ref-for-propdef-visibility③">visibility: hidden</a> can instead be used to keep the page’s layout stable as something is hidden and displayed. For example, here is a (deliberately simplified) possible implementation of a "spoiler" element that can be revealed by clicking on the hidden text: <pre class="highlight"><c- p><</c-><c- f>p</c-><c- p>></c->The symbolism earlier in the movie becomes obvious at the end, when it’s revealed that <c- p><</c-><c- f>spoiler-text</c-><c- p>><</c-><c- f>span</c-><c- p>></c->Luke is his own father<c- p></</c-><c- f>span</c-><c- p>></</c-><c- f>spoiler-text</c-><c- p>></c->, making the wizard’s cryptic riddles meaningful. <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>spoiler-text</c-> <c- p>{</c-> <c- k>border-bottom</c-><c- p>:</c-> <c- mi>1</c-><c- b>px</c-> <c- kc>solid</c-><c- p>;</c-> <c- p>}</c-> <c- f>spoiler-text</c-> <c- o>></c-> <c- f>span</c-> <c- p>{</c-> <c- k>visibility</c-><c- p>:</c-> <c- kc>hidden</c-><c- p>;</c-> <c- p>}</c-> <c- f>spoiler-text</c-><c- p>.</c-><c- nc>shown</c-> <c- o>></c-> <c- f>span</c-> <c- p>{</c-> <c- k>visibility</c-><c- p>:</c-> <c- kc>visible</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- p>[...</c->document<c- p>.</c->querySelectorAll<c- p>(</c-><c- u>"spoiler-text"</c-><c- p>)].</c->forEach<c- p>(</c->el<c- p>=>{</c-> el<c- p>.</c->addEventListener<c- p>(</c-><c- u>"click"</c-><c- p>,</c-> e<c- p>=></c->el<c- p>.</c->classList<c- p>.</c->toggle<c- p>(</c-><c- u>"shown"</c-><c- p>));</c-> <c- p>});</c-> <c- p></</c-><c- f>script</c-><c- p>></c-> </pre> This example is deliberately significantly simplified. It is missing a number of accessiblity and UX features that a well-designed spoiler element would have to show off the <a class="property css" data-link-type="property" href="#propdef-visibility" id="ref-for-propdef-visibility④">visibility</a> usage more plainly. Don’t copy this code for a real site. </div> <h2 class="heading settled" data-level="5" id="run-in-layout">5. Run-In Layout<a class="self-link" href="#run-in-layout"></a></h2> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="run-in | run-in box" id="run-in">run-in box</dfn> is a box that merges into a block that comes after it, inserting itself at the beginning of that block’s inline-level content. This is useful for formatting compact headlines, definitions, and other similar things, where the appropriate DOM structure is to have a headline preceding the following prose, but the desired display is an inline headline laying out with the text. <div class="example" id="example-8e61beaa"> <a class="self-link" href="#example-8e61beaa"></a> For example, dictionary definitions are often formatted so that the word is inline with the definition: <pre><dl class='dict'> <dt>dictionary <dd>a book that lists the words of a language in alphabetical order and gives their meaning, or that gives the equivalent words in a different language. <dt>glossary <dd>an alphabetical list of terms or words found in or relating to a specific subject, text, or dialect, with explanations; a brief dictionary. </dl> <style> .dict > dt { display: run-in; } .dict > dt::after { content: ": " } </style> </pre> Which is formatted as: <pre>dictionary: a book that lists the words of a language in alphabetical order and explains their meaning. glossary: an alphabetical list of terms or words found in or relating to a specific subject, text, or dialect, with explanations; a brief dictionary. </pre> </div> A <a data-link-type="dfn" href="#run-in" id="ref-for-run-in②">run-in box</a> behaves exactly as any other <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box①">inline-level box</a>, except: <ul> <li> A <a data-link-type="dfn" href="#run-in" id="ref-for-run-in③">run-in box</a> with a <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑥">flow</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①③">inner display type</a> <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑥">inlinifies</a> its contents. <li> If a <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence">run-in sequence</a> is immediately followed by a block box that does not establish a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑥">block formatting context</a>, it is inserted as direct children of that block box: after its <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②">::marker</a> pseudo-element’s boxes (if any), but preceding any other boxes generated by the contents of the block (including the box generated by the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a> pseudo-element, if any). This re-parenting recurses if possible (so that the run-in effectively becomes part of the deepest subsequent “paragraph” in its formatting context, collecting newly-adjacent run-ins as it goes). The reparented content is then formatted as if originally parented there. Note that only layout is affected, not inheritance, because property inheritance for non-anonymous boxes is based only on the element tree. <li> Otherwise (if the <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence①">run-in sequence</a> is not followed by such a block), an anonymous block box is generated around the run-in sequence and all immediately following inline-level content (up to, but not including, the next run-in sequence, if any). </ul> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="run-in-sequence">run-in sequence</dfn> is a maximal sequence of consecutive sibling <a data-link-type="dfn" href="#run-in" id="ref-for-run-in④">run-in boxes</a> and intervening <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-4/#white-space" id="ref-for-white-space">white space</a> and/or out-of-flow boxes. Note: This statement implies that out-of-flow boxes are reparented if they are between two run-in boxes. Another alternative would be to leave behind the intervening out-of-flow boxes, or to have out-of-flow boxes impede the running-in of earlier boxes. Implementers and authors are encouraged to contact the CSSWG if they have a preferred behavior, as this one was picked somewhat at random. This fixup occurs before the anonymous block and inline box fixup described in <a href="https://www.w3.org/TR/CSS21/visuren.html#box-gen">CSS2§9.2</a>, and affects the determination of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line">first formatted line</a> of the affected elements as if the <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence④">run-in sequence</a> were originally in its final location in the box tree. Note: As the earliest run-in represents the first text on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line①">first formatted line</a> of its containing block, a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter①">::first-letter</a> pseudo-element applied to that block element selects the first letter of the run-in, rather than the first letter of its own contents. Note: This run-in model is slightly different from the one proposed in earlier revisions of <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <h2 class="no-num heading settled" id="glossary"> Appendix A: Glossary<a class="self-link" href="#glossary"></a></h2> The following terms are defined here for convenience: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="root-element">root element</dfn> <dd> The <a data-link-type="dfn" href="#elements" id="ref-for-elements⑦">element</a> at the root of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-tree" id="ref-for-concept-document-tree">document tree</a>. In a document tree produced under the DOM, this is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element">document element</a>; in HTML it is the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element">html</a></code> element. <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="principal-box">principal box</dfn> <dd> When an <a data-link-type="dfn" href="#elements" id="ref-for-elements⑧">element</a> generates one or more <a data-link-type="dfn" href="#box" id="ref-for-box①①">boxes</a>, one of them is the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑨">principal box</a>, which contains its descendant boxes and generated content, and is also the box involved in any positioning scheme. Some elements may generate additional boxes in addition to the principal box (such as <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item④">list-item</a> elements, which generate an additional marker box, or <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table③">table</a> elements, which generate a <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①⓪">principal</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box④">table wrapper box</a> and an additional <a data-link-type="dfn" href="https://www.w3.org/TR/css-tables-3/#table-grid-box" id="ref-for-table-grid-box④">table grid box</a>). These additional boxes are placed with respect to the principal box. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline-level|inline-level content" id="inline-level">inline-level</dfn> <dd> Content that participates in inline layout. Specifically, inline-level boxes and <a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence⑨">text sequences</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block-level|block-level content" id="block-level">block-level</dfn> <dd> Content that participates in <a data-link-type="dfn" href="#block-layout" id="ref-for-block-layout">block layout</a>. Specifically, block-level boxes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-box">inline box</dfn> <dd> A non-replaced <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑤">inline-level</a> box whose <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①④">inner display type</a> is <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑦">flow</a>. The contents of an inline box participate in the same inline formatting context as the inline box itself. <dt><dfn data-dfn-type="dfn" data-export id="inline">inline<a class="self-link" href="#inline"></a></dfn> <dd> Used as a shorthand for <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑥">inline box</a> or <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box②">inline-level box</a> where unambiguous, or as an adjective meaning <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑥">inline-level</a>. The latter usage is deprecated. <dt><dfn data-dfn-type="dfn" data-export data-lt="atomic inline|atomic inline box" id="atomic-inline">atomic inline<a class="self-link" href="#atomic-inline"></a></dfn> <dd> An inline-level box that is replaced (such as an image) or that establishes a new formatting context (such as an <a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block①">inline-block</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-table" id="ref-for-valdef-display-inline-table①">inline-table</a>) and cannot split across lines (as <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑦">inline boxes</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container④">ruby containers</a> can). Any inline-level box whose <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑤">inner display type</a> is not <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑧">flow</a> establishes a new formatting context of the specified inner display type. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block container|block container box" id="block-container">block container</dfn> <dd> A block container either contains only inline-level boxes participating in an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context①">inline formatting context</a>, or contains only block-level boxes participating in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑦">block formatting context</a> (possibly generating anonymous block boxes to ensure this constraint, as defined in <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">CSS2§9.2.1.1</a>). A block container that contains only inline-level content establishes a new <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context②">inline formatting context</a>. The element then also generates a <a data-link-type="dfn" href="https://www.w3.org/TR/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a> which wraps all of its inline content. Note, this <a data-link-type="dfn" href="https://www.w3.org/TR/css-inline-3/#root-inline-box" id="ref-for-root-inline-box①">root inline box</a> concept effectively replaces the "anonymous inline element" concept introduced in <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous">CSS2§9.2.2.1</a>. A block container establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑧">block formatting context</a> if its parent formatting context is not a block formatting context; otherwise, when participating in a block formatting context itself, it either establishes a new block formatting context for its contents or continues the one in which it participates, as determined by the constraints of other properties (such as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> or <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a>). Note: A block container box can both establish a block formatting context and an inline formatting context simultaneously. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-box">block box</dfn> <dd> A <a data-link-type="dfn" href="#block-level-box" id="ref-for-block-level-box">block-level box</a> that is also a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑦">block container</a>. Note: Not all <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑧">block container</a> boxes are <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑤">block-level</a> boxes: non-replaced <a data-link-type="dfn" href="#inline-block" id="ref-for-inline-block①">inline blocks</a> and non-replaced table cells, for example, are block containers but not block-level boxes. Similarly, not all block-level boxes are block containers: block-level replaced elements (<a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑥">display: block</a>) and flex containers (display: flex), for example, are not block containers. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block">block</dfn> <dd> Used as a shorthand for <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑥">block box</a>, <a data-link-type="dfn" href="#block-level-box" id="ref-for-block-level-box①">block-level box</a>, or <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑨">block container box</a>, where unambiguous. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="replaced element|replaced" id="replaced-element">replaced element</dfn> <dd> An element whose content is outside the scope of the CSS formatting model, such as an image or embedded document. For example, the content of the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> element is often replaced by the image that its <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src" id="ref-for-attr-img-src">src</a></code> attribute designates. Replaced elements often have <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions">natural dimensions</a>. For example, a bitmap image has a natural width and a natural height specified in absolute units (from which the natural ratio can obviously be determined). On the other hand, other objects may not have any natural dimensions (for example, a blank HTML document). See <a data-link-type="biblio" href="#biblio-css-images-3" title="CSS Images Module Level 3">[css-images-3]</a>. User agents may consider a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element⑥">replaced element</a> to not have any <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions①">natural dimensions</a> if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed natural size depending on the user’s bank balance, then the UA might want to act as if that resource had no natural dimensions. The content of replaced elements is not considered in the CSS formatting model; however, their <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions③">natural dimensions</a> are used in various layout calculations. Replaced elements always establish an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context①">independent formatting context</a>. A <dfn data-dfn-type="dfn" data-export data-lt="non-replaced | non-replaced element" id="non-replaced">non-replaced<a class="self-link" href="#non-replaced"></a></dfn> element is one that is not <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element⑦">replaced</a>, i.e. whose rendering is dictated by the CSS model. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="containing-block">containing block</dfn> <dd> A rectangle that forms the basis of sizing and positioning for the <a data-link-type="dfn" href="#box" id="ref-for-box①②">boxes</a> associated with it. Notably, a <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①">containing block</a> is not a <a data-link-type="dfn" href="#box" id="ref-for-box①③">box</a> (it is a rectangle), however it is often derived from the dimensions of a box. Each box is given a position with respect to its containing block, but it is not confined by this containing block; it can <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#overflow" id="ref-for-overflow">overflow</a>. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates. In general, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#box-box-edge" id="ref-for-box-box-edge">edges</a> of a <a data-link-type="dfn" href="#box" id="ref-for-box①⑥">box</a> act as the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block⑤">containing block</a> for descendant boxes; we say that a box “establishes” the containing block for its descendants. If properties of a containing block are referenced, they reference the values on the box that generated the containing block. (For the <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a>, values are taken from the root element unless otherwise specified.) See <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">Section 9.1.2</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">Section 10.1</a> and <a href="https://www.w3.org/TR/css-position-3/#def-cb"><cite>CSS Positioned Layout 3</cite> § 2.1 Containing Blocks of Positioned Boxes</a> for details. <dt><dfn data-dfn-type="dfn" data-export id="containing-block-chain">containing block chain<a class="self-link" href="#containing-block-chain"></a></dfn> <dd> A sequence of successive <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block⑨">containing blocks</a> that form an ancestor-descendant chain through the containing block relation. For example, an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑧">inline box</a>’s containing block is the content box of its closest <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⓪">block container</a> ancestor; if that block container is an in-flow <a data-link-type="dfn" href="#block" id="ref-for-block">block</a>, then its containing block is formed by its parent block container; if that grandparent block container is <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#absolute-position" id="ref-for-absolute-position">absolutely positioned</a>, then its containing block is the padding edges of its closest positioned ancestor (not necessarily its parent), and so on up to the <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block②">initial containing block</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="initial-containing-block">initial containing block</dfn> <dd> The <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①①">containing block</a> of the <a data-link-type="dfn" href="#root-element" id="ref-for-root-element①">root element</a>. The <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block③">initial containing block</a> establishes a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①②">block formatting context</a>. See <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">CSS2.1§10.1</a> for <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#continuous-media" id="ref-for-continuous-media">continuous media</a>; and <a data-link-type="biblio" href="#biblio-css-page-3" title="CSS Paged Media Module Level 3">[CSS-PAGE-3]</a> for <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#paged-media" id="ref-for-paged-media">paged media</a> for its position and dimensions. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="formatting-context">formatting context</dfn> <dd> A <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context⑤">formatting context</a> is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context①">flex formatting context</a> lays out boxes according to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-layout" id="ref-for-flex-layout">flex layout</a> rules <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>, whereas a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①③">block formatting context</a> lays out boxes according to the block-and-inline layout rules <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. Additionally, some types of formatting contexts interleave and co-exist: for example, an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context③">inline formatting context</a> exists within and interacts with the block formatting context of the element that establishes it, and a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container⑤">ruby container</a> overlays a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context②">ruby formatting context</a> over the inline formatting context in which its <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box">ruby base container</a> participates. A box either establishes a new <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context②">independent formatting context</a> or continues the <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context⑧">formatting context</a> of its containing block. In some cases, it might additionally establish a new (non-independent) co-existing formatting context. Unless otherwise specified, however, establishing a new formatting context creates an independent formatting context. The type of formatting context established by the box is determined by its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑦">inner display type</a>. E.g. a <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid container</a> establishes a new <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-formatting-context" id="ref-for-grid-formatting-context②">grid formatting context</a>, a <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-container" id="ref-for-ruby-container⑥">ruby container</a> establishes a new <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context③">ruby formatting context</a>, and a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①③">block container</a> can establish a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑤">block formatting context</a> and/or a new <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑤">inline formatting context</a>. See the <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display③⑧">display</a> property. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="independent-formatting-context">independent formatting context</dfn> <dd> When a box establishes an independent formatting context (whether that <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⓪">formatting context</a> is of the same type as its parent or not), it essentially creates a new, independent layout environment: except through the sizing of the box itself, the layout of its descendants is (generally) not affected by the rules and contents of the formatting context outside the box, and vice versa. <a class="self-link" href="#example-7e2994e7"></a> For example, in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑥">block formatting context</a>, floated boxes affect the layout of surrounding boxes. But their effects do not escape their <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①②">formatting context</a>: the box establishing their formatting context grows to fully contain them, and floats from outside that box are not allowed to protrude into and affect the contents inside the box. <a class="self-link" href="#example-bb8209a6"></a> As another example, margins do not collapse across <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①④">formatting context</a> boundaries. Exclusions are able to affect content across <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context④">independent formatting context</a> boundaries. (At time of writing, they are the only layout feature that can.) <a data-link-type="biblio" href="#biblio-css3-exclusions" title="CSS Exclusions Module Level 1">[CSS3-EXCLUSIONS]</a> Certain properties can force a box to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="establish an independent formatting context| establishes an independent formatting context| establishing an independent formatting context| established an independent formatting context" id="establish-an-independent-formatting-context"> establish an independent formatting context</dfn> in cases where it wouldn’t ordinarily. For example, making a box <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow">out-of-flow</a> causes it to <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑦">blockify</a> as well as to <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context">establish an independent formatting context</a>. As another example, certain values of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-contain-2/#propdef-contain" id="ref-for-propdef-contain">contain</a> property can cause a box to establish an independent formatting context. Turning a block into a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> will cause it to establish an independent formatting context; however turning a <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#subgrid" id="ref-for-subgrid">subgrid</a> into a scroll container will not—it continues to act as a subgrid, with its contents participating in the layout of its parent <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid container</a>. A <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑦">block box</a> that <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context③">establishes an independent formatting context</a> establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑦">block formatting context</a> for its contents. In most other cases, forcing a box to establish an independent formatting context is a no-op—either the box already establishes an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑤">independent formatting context</a> (e.g. <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex containers</a>), or it’s not possible to establish a totally independent new formatting context on that type of box (e.g. non-replaced <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑨">inline boxes</a>). <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-formatting-context">block formatting context</dfn> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-formatting-context">inline formatting context</dfn> <dd> <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑧">Block</a> and <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑥">inline formatting contexts</a> are defined in <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 Section 9.4</a>. Inline formatting contexts exist within (are part of their containing) block formatting contexts; for example, line boxes belonging to the inline formatting context interact with floats belonging to the block formatting context. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-layout">block layout</dfn> <dd> The layout of <a data-link-type="dfn" href="#block-level-box" id="ref-for-block-level-box②">block-level boxes</a>, performed within a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②①">block formatting context</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-formatting-context-root">block formatting context root</dfn> <dd> A <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①④">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②②">block formatting context</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="bfc">BFC</dfn> <dd> Abbreviation for <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②③">block formatting context</a> or <a data-link-type="dfn" href="#block-formatting-context-root" id="ref-for-block-formatting-context-root">block formatting context root</a>. Has various informal definitions referring to boxes which contain internal floats, exclude external floats, and suppress margin collapsing, and may therefore refer specifically to one of: <ul> <li data-md> a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⑤">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②④">block formatting context</a> for its contents <li data-md> a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑧">block box</a> (i.e. a <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑥">block-level</a> block container) that establishes a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②⑤">block formatting context</a> for its contents (as distinguished from a block box which does not) <li data-md> (very loosely) any block-level box that establishes a new <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⑤">formatting context</a> (other than an inline formatting context) </ul> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="out of flow | out-of-flow" id="out-of-flow">out-of-flow</dfn> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="in flow | in-flow" id="in-flow">in-flow</dfn> <dd> A box is <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow①">out-of-flow</a> if it is extracted from its expected position and interaction with surrounding content and laid out using a different paradigm outside the normal flow of content in its parent formatting context. This occurs if the box is floated (via <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float①">float</a>) or <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#absolute-position" id="ref-for-absolute-position①">absolutely positioned</a> (via <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a>). A box is <a data-link-type="dfn" href="#in-flow" id="ref-for-in-flow">in-flow</a> if it is not out-of-flow. Note: Some <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⑥">formatting contexts</a> inhibit floating, so that an element with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float②">float: left</a> is not necessarily <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow③">out-of-flow</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="document-order">document order</dfn> <dd> The order in which boxes or content occurs in the document (which can be different from the order in which it appears for rendering). For the purpose of determining the relative order of pseudo-elements, the box-tree order is used, see <a href="https://www.w3.org/TR/css-pseudo-4/#treelike"><cite>CSS Pseudo-Elements 4</cite> § 4 Tree-Abiding Pseudo-elements</a>. </dl> See <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html">Chapter 9</a> for a fuller definition of these terms. <h2 class="no-num non-normative heading settled" id="unbox"> Appendix B: Effects of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑨">display: contents</a> on Unusual Elements<a class="self-link" href="#unbox"></a></h2> This section is (currently) non-normative. Some elements aren’t rendered purely by CSS box concepts; for example, replaced elements (such as <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element①">img</a></code>), many form controls (such as <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element">input</a></code>), and SVG elements. This appendix defines how they interact with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⓪">display: contents</a>. <h3 class="heading settled" id="unbox-html">HTML Elements<a class="self-link" href="#unbox-html"></a></h3> <dl> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element" id="ref-for-the-br-element">br</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element" id="ref-for-the-wbr-element">wbr</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element" id="ref-for-the-meter-element">meter</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element" id="ref-for-the-progress-element">progress</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/canvas.html#canvas" id="ref-for-canvas">canvas</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element" id="ref-for-the-embed-element">embed</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element" id="ref-for-the-object-element">object</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#audio" id="ref-for-audio">audio</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element">iframe</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element②">img</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#video" id="ref-for-video">video</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frame" id="ref-for-frame">frame</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset" id="ref-for-frameset">frameset</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element①">input</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element" id="ref-for-the-textarea-element">textarea</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element" id="ref-for-the-select-element">select</a></code> <dd data-md> <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④①">display: contents</a> computes to display: none. <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element①">legend</a></code> <dd data-md> Per HTML, a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element②">legend</a></code> with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④③">display: contents</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend" id="ref-for-rendered-legend">rendered legend</a>, so it does not have magical display behavior. (Thus, it reacts to display: contents normally.) <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element" id="ref-for-the-button-element">button</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element" id="ref-for-the-details-element">details</a></code> <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" id="ref-for-the-fieldset-element①">fieldset</a></code> <dd data-md> These elements don’t have any special behavior; <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑤">display: contents</a> simply removes their <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①①">principal box</a>, and their contents render as normal. <dt data-md>any other HTML element <dd data-md> Behaves as normal for <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑥">display: contents</a>. </dl> <h3 class="heading settled" id="unbox-svg">SVG Elements<a class="self-link" href="#unbox-svg"></a></h3> <dl> <dt data-md>An <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-svg" id="ref-for-elementdef-svg">svg</a></code> element that has CSS box layout (this includes all <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-svg" id="ref-for-elementdef-svg①">svg</a></code> whose parent is an HTML element, as well as document root elements) <dd data-md> <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑦">display: contents</a> computes to display: none. <dt data-md>All other SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element">container elements</a> that are also <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/render.html#TermRenderableElement" id="ref-for-TermRenderableElement">renderable elements</a> <dt data-md>SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement" id="ref-for-TermTextContentChildElement">text content child elements</a> <dt data-md><code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use">use</a></code> <dd data-md> <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑨">display: contents</a> strips the element from the formatting tree, and hoists its contents up to display in its place. These contents include the shadow-DOM content for <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①">use</a></code>. <dt data-md>any other SVG elements <dd data-md> <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⓪">display: contents</a> computes to display: none. </dl> <div class="note" role="note"> The intention here is that the <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤②">display: none</a> behavior applies whenever the "rendering context" inside the element is different than the context outside of it. If the element’s child elements would not be valid children of the element’s parent, you cannot simply hoist them up the formatting tree. For example, text content and text formatting elements in SVG require a <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text">text</a></code> element context; if you remove a <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text①">text</a></code>, its child text content and elements are no longer valid. For that reason, <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤③">display: contents</a> on <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text②">text</a></code> prevents the entire text element from being rendered. In contrast, any valid content inside a <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-tspan" id="ref-for-elementdef-tspan">tspan</a></code> or <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-textPath" id="ref-for-elementdef-textPath">textPath</a></code> is also valid content inside the parent text formatting context, so the hoisting behavior applies for these elements. Similarly, if hoisting would convert the children from <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/render.html#TermNonRenderedElement" id="ref-for-TermNonRenderedElement">non-rendered elements</a> (e.g., a shape inside a <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern">pattern</a></code> or <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol" id="ref-for-elementdef-symbol">symbol</a></code>) to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/render.html#TermRenderedElement" id="ref-for-TermRenderedElement">rendered elements</a> (e.g., a shape that is a direct child of the <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-svg" id="ref-for-elementdef-svg②">svg</a></code>), that is an invalid change of rendering context. Never-rendered container elements therefore cannot be "un-boxed" by <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤④">display: contents</a>. </div> When an element is stripped from the formatting tree, then any SVG attributes on that element that control layout and visual formatting are ignored when rendering the contents. However, SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/styling.html#TermPresentationAttribute" id="ref-for-TermPresentationAttribute">presentation attributes</a>—which map to CSS properties—continue to affect value processing and inheritance <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">[CSS-CASCADE-3]</a>; thus such attributes can affect the layout and visual formatting of the element’s descendants by influencing the values of such properties on those descendants. <h3 class="heading settled" id="unbox-mathml">MathML Elements<a class="self-link" href="#unbox-mathml"></a></h3> For all MathML elements, <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑤">display: contents</a> computes to display: none. <h2 class="no-num heading settled" id="box-guidelines"> Appendix C: Box Construction Guidelines for Spec Authors<a class="self-link" href="#box-guidelines"></a></h2> This section is non-normative guidance for specification authors. <ul> <li data-md> A box cannot be <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑧">blockified</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑦">inlinified</a> at the same time; if such a thing would occur, define which wins over the other. <li data-md> Non-principal non-anonymous boxes can’t be <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑨">blockified</a>: blockification affects the element’s computed values and thus determines the type of its <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①②">principal box</a>. <li data-md> Boxes which <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①⓪">blockify</a> their contents can’t directly contain <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑦">inline-level</a> content; any boxes or text sequences generated within such an element must be blockified or wrapped in an <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous③">anonymous</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⑥">block container</a>. <li data-md> Boxes which <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑧">inlinify</a> their contents can’t directly contain <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑦">block-level</a> boxes; any boxes generated within such an element must be <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑧">inline-level</a>. <li data-md> Boxes that fundamentally cannot establish an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑥">independent formatting context</a> (such as non-replaced inlines) must not be asked to <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context⑤">establish an independent formatting context</a>. Blockify them first, or otherwise change their box type to one that can establish an independent formatting context. </ul> <h2 class="no-num heading settled" id="acknowledgments"> Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> We would like to thank the many people who have attempted to separate out the disparate details of box generation over the years, most particularly Bert Bos, whose last attempt with <a class="property css" data-link-type="property">display-model</a> and display-role didn’t get anywhere, but primed us for the current spec; Anton Prowse, whose relentless assault on CSS2.1 Chapter 9 forced some order out of the chaos; and Oriol Brufau, who teased apart dozens of fine distinctions and errors in this spec. Honorable mentions also go to David Baron, Mats Palmgren, Ilya Streltsyn, and Boris Zbarsky for their feedback. <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" id="changes-2020"> Changes Since 2020 Candidate Recommendation<a class="self-link" href="#changes-2020"></a></h3> A <a href="https://drafts.csswg.org/css-display-3/issues-cr-2020">Disposition of Comments</a> since the <a href="https://www.w3.org/TR/2020/CR-css-display-3-20200519/">19 May 2020 Candidate Recommendation</a> is available. Changes since the <a href="https://www.w3.org/TR/2020/CR-css-display-3-20200519/">19 May 2020 Candidate Recommendation</a> include: <ul> <li id="change-text-run-sequence"><a class="self-link" href="#change-text-run-sequence"></a> Renamed “text run” to “<a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence①⓪">text sequence</a>”. (<a href="https://github.com/w3c/csswg-drafts/issues/7768">Issue 7768</a>) <li id="change-root-layout"><a class="self-link" href="#change-root-layout"></a> Defined <a data-link-type="dfn" href="#root-element" id="ref-for-root-element②">root element</a> and clarified its layout as a <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑧">block-level</a> in <a href="#root">§ 2.8 The Root Element’s Principal Box</a> and the definition of <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block④">initial containing block</a>. (<a href="https://github.com/w3c/csswg-drafts/pull/8095">PR 8095</a>, <a href="https://github.com/w3c/csswg-drafts/issues/7207">Issue 7207</a>, <a href="https://github.com/w3c/csswg-drafts/issues/6480">Issue 6480</a>, <a href="https://github.com/w3c/csswg-drafts/issues/7786">Issue 7786</a>) <li id="change-move-order"><a class="self-link" href="#change-move-order"></a> Pulled in the <a class="property css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①⑥">order</a> property definition from <a data-link-type="biblio" href="#biblio-css-flexbox-1" title="CSS Flexible Box Layout Module Level 1">[CSS-FLEXBOX-1]</a>, since it also applies to <a data-link-type="dfn" href="https://www.w3.org/TR/css-grid-2/#grid-item" id="ref-for-grid-item⑤">grid items</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5865">Issue 5865</a>) <li id="change-import-visibility"><a class="self-link" href="#change-import-visibility"></a> Imported the <a class="property css" data-link-type="property" href="#propdef-visibility" id="ref-for-propdef-visibility⑤">visibility</a> property definition from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> and updated it to be more thorough and complete. (<a href="https://github.com/w3c/csswg-drafts/issues/6123">Issue 6123</a>) <li id="change-internal-replaced"><a class="self-link" href="#change-internal-replaced"></a> Defined that <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element⑧">replaced elements</a> with a <a data-link-type="dfn" href="#layout-internal" id="ref-for-layout-internal⑤">layout-internal</a> <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑤⑦">display</a> are treated as display: inline. (<a href="https://github.com/w3c/csswg-drafts/issues/6000">Issue 6000</a>) <li id="change-legacy-computation"> <a class="self-link" href="#change-legacy-computation"></a> Clarified that the <a class="production css" data-link-type="type" href="#typedef-display-legacy" id="ref-for-typedef-display-legacy②" title="Expands to: inline-block | inline-flex | inline-grid | inline-table"><display-legacy></a> values actually <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value③">compute</a> to the same value as their two-keyword equivalents. (<a href="https://github.com/w3c/csswg-drafts/issues/5575">Issue 5575</a>) <blockquote> <dl> <dt>inline-… <dd> <del>Behaves as</del> <ins>Computes to</ins> inline …. </dl> <ins>Note: Although these keywords and their equivalents compute to the same value, their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value①">specified values</a> remain distinct.</ins> <ins>Note: The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle②">getComputedStyle()</a></code> serialization rules will always output these precomposed keywords rather than the equivalent two-keyword pairs due to the <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">shortest, most backwards-compatible serialization principle</a>.</ins> </blockquote> <li id="change-blockification-computed"> <a class="self-link" href="#change-blockification-computed"></a> Clarified that <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①②">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑨">inlinification</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed value</a> changes. (<a href="https://github.com/w3c/csswg-drafts/issues/6251">Issue 6251</a>) <blockquote> Some layout effects require <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①③">blockification</a> or <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①⓪">inlinification</a> of the box type, which sets the box’s <ins><a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑤">computed</a></ins> <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type①①">outer display type</a> to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑨">block</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline⑧">inline</a> (respectively). </blockquote> <li id="change-block-layout-def"><a class="self-link" href="#change-block-layout-def"></a> Added definition for <a data-link-type="dfn" href="#block-layout" id="ref-for-block-layout①">block layout</a> to glossary, for convenience. <li id="change-grid-refs"><a class="self-link" href="#change-grid-refs"></a> Updated references to <a href="https://www.w3.org/TR/css-grid/">CSS Grid Layout</a>. <li id="change-2020-editorial"><a class="self-link" href="#change-2020-editorial"></a> Various minor editorial clarifications and cross-linking improvements. </ul> <h3 class="heading settled" id="changes-2019"> Changes Since 2019 Candidate Recommendation<a class="self-link" href="#changes-2019"></a></h3> Changes since the <a href="https://www.w3.org/TR/2019/CR-css-display-3-20190711/">11 July 2019 Candidate Recommendation</a> include: <ul> <li id="change-containing-block"><a class="self-link" href="#change-containing-block"></a> Merged in additional prose from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> into the definition of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①②">containing block</a>. <li id="change-dom-ignore"> <a class="self-link" href="#change-dom-ignore"></a> Clarified that, for the purpose of CSS, DOM nodes other than elements and text are ignored. <blockquote> <ins>(Some source documents start from more complex trees, such as the DOM, which can have comment nodes and other types of things. For the purposes of CSS, all of these additional types of nodes are ignored, as if they didn’t exist.)</ins> </blockquote> <li id="change-abspos-glossary"><a class="self-link" href="#change-abspos-glossary"></a> Improved/moved glossary definitions relating to <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#absolute-position" id="ref-for-absolute-position②">absolute positioning</a>. </ul> Changes since the <a href="https://www.w3.org/TR/2018/CR-css-display-3-20180828/">28 August 2018 Candidate Recommendation</a> include: <ul> <li id="change-parent"><a class="self-link" href="#change-parent"></a> Defined box tree parentage; see <a data-link-type="dfn" href="#css-parent-box" id="ref-for-css-parent-box">parent box</a>. <li id="change-abspos"><a class="self-link" href="#change-abspos"></a> Added definition of <a data-link-type="dfn" href="https://www.w3.org/TR/css-position-3/#absolute-position" id="ref-for-absolute-position③">absolutely positioned</a> to the glossary; <a href="https://www.w3.org/TR/CSS2/visuren.html#absolutely-positioned">copied from CSS2</a> for easier referencing. <li id="change-bidi-fragment"><a class="self-link" href="#change-bidi-fragment"></a> Added cross-references to various forms of fragmentation in <a href="#intro">§ 1 Introduction</a>. <li id="change-table-grid-box"><a class="self-link" href="#change-table-grid-box"></a> Renamed “table box” to “table grid box” to more easily distinguish from “table wrapper box”. <li id="change-body-propagation"><a class="self-link" href="#change-body-propagation"></a> Added “unless otherwise specified” to root → initial containing block propagation, since there are some regrettable special exceptions for the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> element. </ul> <h3 class="heading settled" id="changes-wd"> Changes Prior to Candidate Recommendation Status<a class="self-link" href="#changes-wd"></a></h3> A <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017">Disposition of Comments</a> is available. Changes since the <a href="https://www.w3.org/TR/2018/WD-css-display-3-20180420/">20 April 2018 Working Draft</a> include: <ul> <li> Elements with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑨">display: contents</a> that behave as display: none now compute to display: none. (<a href="https://github.com/w3c/csswg-drafts/issues/2755">Issue 2755</a>) <li> Distinguished “new” <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⑦">formatting context</a> from <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑧">independent formatting context</a> since certain formatting contexts layer. (<a href="https://github.com/w3c/csswg-drafts/issues/2597">Issue 2597</a>, <a href="https://github.com/w3c/csswg-drafts/issues/1457">Issue 1457</a>) <li> Defined that <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑨">block boxes</a> that establish an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑨">independent formatting context</a> have a used <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥②">display</a> of <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑧">flow-root</a>, to provide an easier point of reference. (<a href="https://github.com/w3c/csswg-drafts/issues/1550">Issue 1550</a>) <li> Clarified that <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥③">display</a> is not animatable (as opposed to discretely animatable). (<a href="https://github.com/w3c/csswg-drafts/issues/2938">Issue 2938</a>) <li> Minor editorial fixes. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-display-3-20170720/">20 July 2017 Working Draft</a> include: <ul> <li data-md> Tightened up rules for the <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①④">blockification</a> of <a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block②">inline-block</a> / inline flow-root to ensure compatibility with CSS2. (<a href="https://github.com/w3c/csswg-drafts/issues/1246">Issue 1246</a>) Updated handling of run-in flow-root to match. (<a href="https://github.com/w3c/csswg-drafts/issues/1715">Issue 1715</a>) <li data-md> Adjusted grammar of <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥④">display</a> to list the <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item⑤">list-item</a> keyword last. This affects the expected serialization order. (<a href="https://github.com/w3c/csswg-drafts/issues/1621">Issue 1621</a>) <li data-md> Added better definition of interaction between <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②⑥">block formatting contexts</a> and <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑨">inline formatting contexts</a> in block containers that establish inline formatting contexts. (<a href="https://github.com/w3c/csswg-drafts/issues/1553">Issue 1553</a>) <li data-md> More clearly defined the way property values are reflected between an element and its boxes (in the case of an element generating multiple boxes). (<a href="https://github.com/w3c/csswg-drafts/issues/1643">Issue 1643</a>) <li data-md> Clarified that empty text objects are ignored for CSS rendering. (<a href="https://github.com/w3c/csswg-drafts/issues/1808">Issue 1808</a>) <li data-md> Clarified that <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥⑤">display</a> has no effect on document semantics, since this is a common bug in UAs. (<a href="https://github.com/w3c/csswg-drafts/issues/2355">Issue 2355</a>) <li data-md> Fixed error in definition of <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥⑥">display</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑥">computed value</a> (which is definitely not “as specified”, due to <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①⑤">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①①">inlinification</a> rules triggered by various properties). (<a href="https://github.com/w3c/csswg-drafts/issues/1716">Issue 1716</a>) <li data-md> Added definition for <a data-link-type="dfn" href="#document-order" id="ref-for-document-order">document order</a>. <li data-md> Added missing SVG elements to <a href="#unbox">Appendix B</a>’s details on <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⑦">display: contents</a> (<a href="https://github.com/w3c/csswg-drafts/issues/2118">Issue 2118</a>), clarified effect of SVG attributes (<a href="https://github.com/w3c/csswg-drafts/issues/2502">Issue 2502</a>), and defined behavior for MathML (<a href="https://github.com/w3c/csswg-drafts/issues/2167">Issue 2167</a>). <li data-md> Added some <a href="#box-guidelines">guidance</a> to future spec authors of anonymous box construction rules. (<a href="https://github.com/w3c/csswg-drafts/issues/1643">Issue 1643</a>) <li data-md> Pushed the section about “becoming a formatting context” back to <a href="https://www.w3.org/TR/css-contain-1/">CSS Containment</a> where it is used. <li data-md> Various minor wording fixes and clarifications. </ul> Changes since the <a href="https://www.w3.org/TR/2017/WD-css-display-3-20170126/">26 January 2017 Working Draft</a> include: <ul> <li data-md> Remove inline-list-item value that is equivalent to inline list-item. <li data-md> Added the notion of “<a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes⑥">text nodes</a>” to the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree②">element tree</a>, and “<a data-link-type="dfn" href="#css-text-sequence" id="ref-for-css-text-sequence①①">text runs</a>” to the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑨">box tree</a> to define behavior in the context of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⑧">display: contents</a>. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-19">Issue 19</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-32">Issue 32</a>) <li data-md> Defined that the root element is “in flow”. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-3">Issue 3</a>) <li data-md> Defined interaction of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a>/<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter②">::first-letter</a> and <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in⑤">run-in</a>. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-5">Issue 5</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-42">Issue 42</a>) <li data-md> Clarified that block/inline/run-in only dictates behavior in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout⑥">flow layout</a>; it is ignored in other contexts. <li data-md> Run-ins are a type of inline box, not just "like" an inline box. <li data-md> Fixed the lack of recursion in of run-in’s box-tree munging. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-45">Issue 45</a>) <li data-md> Added an appendix on how <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⑨">display: contents</a> works on “unusual elements”. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-8">Issue 8</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-18">Issue 18</a>) <li data-md> Fix <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①⑥">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①②">inlinification</a> rules, particularly handling of layout-internal types. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-35">Issue 35</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-57">Issue 57</a>) <li data-md> Clarified interaction of various box tree fixups. (<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-38">Issue 38</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-48">Issue 48</a>) <li data-md> Added the definition of “becoming a formatting context”. <li data-md> Miscellaneous minor fixes and minor clarifications. </ul> A <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017">Disposition of Comments</a> is also available. Changes since the <a href="https://www.w3.org/TR/2015/WD-css-display-3-20151015/">15 October 2015 Working Draft</a> include: <ul> <li>Deferred the box-suppress/display-or-not property to the next level of Display, in order to provide time for further discussion of use cases. <li>Specified the effects of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑦⓪">display: contents</a> on unusual elements such as replaced elements and form controls. <li>Clarified that an element’s <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before②">::before</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after①">::after</a> pseudo-elements still exist if its own box is not generated due to <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑦①">display: contents</a>. <li>Clarified that event bubbling is not affected by <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑦②">display: contents</a>. <li>Clarified interaction of run-ins with out-of-flow elements and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter③">::first-letter</a>. <li>Switched <a class="css" data-link-type="maybe" href="#valdef-display-table-caption" id="ref-for-valdef-display-table-caption①">table-caption</a> and <a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell②">table-cell</a> to use <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑨">flow-root</a> as their <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑧">inner display type</a>, since they always form a formatting context root. <li>Closed off remaining issues and added at-risk list. </ul> Changes since the <a href="https://www.w3.org/TR/2015/WD-css-display-3-20150721/">21 July 2015 Working Draft</a> include: <ul> <li>Added definitions for <a data-link-type="dfn" href="#in-flow" id="ref-for-in-flow①">in-flow</a> and <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow④">out-of-flow</a> to glossary. </ul> Changes since the <a href="https://www.w3.org/TR/2014/WD-css-display-3-20140911/">11 September 2014 Working Draft</a> include: <ul> <li>Removed display-inside, display-outside, and display-extras longhands, in favor of just making <a class="property css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑦③">display</a> multi-value. (This was done to impose constraints on what can be combined. Future levels of this specification may relax some or all of those restrictions if they become unnecessary or unwanted.) <li>Created the <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑨">flow</a> and <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root①⓪">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑨">inner display types</a> to better express flow layout <a data-link-type="dfn" href="#display-type" id="ref-for-display-type③">display types</a> and to create an explicit switch for making an element a <a data-link-type="dfn" href="#bfc" id="ref-for-bfc①">BFC</a> root. (This should eliminate the need for hacks like ::after { clear: both; } and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/#propdef-overflow" id="ref-for-propdef-overflow②">overflow: hidden</a> that are intended to accomplish this purpose.) </ul> <h2 class="no-num heading settled" id="priv"> Privacy Considerations<a class="self-link" href="#priv"></a></h2> This specification introduces no new privacy considerations. <h3 class="no-num heading settled" id="sec"> Security Considerations<a class="self-link" href="#sec"></a></h3> This specification introduces no new security considerations. <h3 class="no-num heading settled" id="security-privacy-self-review"> Self-Review Questionaire<a class="self-link" href="#security-privacy-self-review"></a></h3> Per the <a href="https://www.w3.org/TR/security-privacy-questionnaire/#questions"> Self-Review Questionnaire: Security and Privacy: Questions to Consider</a> <ol> <li> Does this specification deal with personally-identifiable information? No. <li> Does this specification deal with high-value data? No. <li> Does this specification introduce new state for an origin that persists across browsing sessions? No. <li> Does this specification expose persistent, cross-origin state to the web? No. <li> Does this specification expose any other data to an origin that it doesn’t currently have access to? No. <li> Does this specification enable new script execution/loading mechanisms? No. <li> Does this specification allow an origin access to a user’s location? No. <li> Does this specification allow an origin access to sensors on a user’s device? No. <li> Does this specification allow an origin access to aspects of a user’s local computing environment? No. <li> Does this specification allow an origin access to other devices? No. <li> Does this specification allow an origin some measure of control over a user agent’s native UI? No. <li> Does this specification expose temporary identifiers to the web? No. <li> Does this specification distinguish between behavior in first-party and third-party contexts? No. <li> How should this specification work in the context of a user agent’s "incognito" mode? No differently. <li> Does this specification persist data to a user’s local device? No. <li> Does this specification have a "Security Considerations" and "Privacy Considerations" section? Yes. <li> Does this specification allow downgrading default security characteristics? No. </ol> </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. <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="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://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="https://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="https://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="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://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="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <h3 class="no-ref heading settled" id="w3c-cr-exit-criteria"> CR exit criteria<a class="self-link" href="#w3c-cr-exit-criteria"></a></h3> For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms: <dl> <dt>independent <dd>each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement. <dt>interoperable <dd>passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review. <dt>implementation <dd> a user agent which: <ol class="inline"> <li>implements the specification. <li>is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability. <li>is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward). </ol> </dl> The specification will remain Candidate Recommendation for at least six months. <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="#anonymous">anonymous</a>, in § 1 <li><a href="#anonymous">anonymous box</a>, in § 1 <li><a href="#atomic-inline">atomic inline</a>, in § Unnumbered section <li><a href="#atomic-inline">atomic inline box</a>, in § Unnumbered section <li><a href="#bfc">BFC</a>, in § Unnumbered section <li> block <ul> <li><a href="#block">definition of</a>, in § Unnumbered section <li><a href="#valdef-display-block">value for display, <display-outside></a>, in § 2.1 </ul> <li><a href="#block-box">block box</a>, in § Unnumbered section <li><a href="#block-container">block container</a>, in § Unnumbered section <li><a href="#block-container">block container box</a>, in § Unnumbered section <li><a href="#block-formatting-context">block formatting context</a>, in § Unnumbered section <li><a href="#block-formatting-context-root">block formatting context root</a>, in § Unnumbered section <li><a href="#blockify">blockification</a>, in § 2.7 <li><a href="#blockify">blockify</a>, in § 2.7 <li><a href="#block-layout">block layout</a>, in § Unnumbered section <li><a href="#block-level">block-level</a>, in § Unnumbered section <li><a href="#block-level-box">block-level box</a>, in § 2.1 <li><a href="#block-level">block-level content</a>, in § Unnumbered section <li><a href="#box">box</a>, in § 1 <li><a href="#box-tree">box tree</a>, in § 1 <li><a href="#valdef-visibility-collapse">collapse</a>, in § 4 <li><a href="#collapsed">collapsed</a>, in § 4 <li><a href="#containing-block">containing block</a>, in § Unnumbered section <li><a href="#containing-block-chain">containing block chain</a>, in § Unnumbered section <li><a href="#valdef-display-contents">contents</a>, in § 2.5 <li><a href="#propdef-display">display</a>, in § 2 <li><a href="#typedef-display-box"><display-box></a>, in § 2 <li><a href="#typedef-display-inside"><display-inside></a>, in § 2 <li><a href="#typedef-display-internal"><display-internal></a>, in § 2 <li><a href="#typedef-display-legacy"><display-legacy></a>, in § 2 <li><a href="#typedef-display-listitem"><display-listitem></a>, in § 2 <li><a href="#typedef-display-outside"><display-outside></a>, in § 2 <li><a href="#display-type">display type</a>, in § 2 <li><a href="#document-order">document order</a>, in § Unnumbered section <li><a href="#elements">element</a>, in § 1 <li><a href="#element-tree">element tree</a>, in § 1 <li><a href="#establish-an-independent-formatting-context">establish an independent formatting context</a>, in § Unnumbered section <li><a href="#establish-an-independent-formatting-context">established an independent formatting context</a>, in § Unnumbered section <li><a href="#establish-an-independent-formatting-context">establishes an independent formatting context</a>, in § Unnumbered section <li><a href="#establish-an-independent-formatting-context">establishing an independent formatting context</a>, in § Unnumbered section <li><a href="#valdef-display-flex">flex</a>, in § 2.2 <li><a href="#valdef-display-flow">flow</a>, in § 2.2 <li><a href="#flow-layout">flow layout</a>, in § 2.2 <li><a href="#valdef-display-flow-root">flow-root</a>, in § 2.2 <li><a href="#formatting-context">formatting context</a>, in § Unnumbered section <li><a href="#valdef-display-grid">grid</a>, in § 2.2 <li><a href="#valdef-visibility-hidden">hidden</a>, in § 4 <li><a href="#independent-formatting-context">independent formatting context</a>, in § Unnumbered section <li><a href="#in-flow">in flow</a>, in § Unnumbered section <li><a href="#in-flow">in-flow</a>, in § Unnumbered section <li><a href="#initial-containing-block">initial containing block</a>, in § Unnumbered section <li> inline <ul> <li><a href="#inline">definition of</a>, in § Unnumbered section <li><a href="#valdef-display-inline">value for display, <display-outside></a>, in § 2.1 </ul> <li><a href="#inline-block">inline block</a>, in § 2 <li><a href="#valdef-display-inline-block">inline-block</a>, in § 2.6 <li><a href="#inline-block">inline block box</a>, in § 2 <li><a href="#inline-box">inline box</a>, in § Unnumbered section <li><a href="#valdef-display-inline-flex">inline-flex</a>, in § 2.6 <li><a href="#inline-formatting-context">inline formatting context</a>, in § Unnumbered section <li><a href="#valdef-display-inline-grid">inline-grid</a>, in § 2.6 <li><a href="#inline-level">inline-level</a>, in § Unnumbered section <li><a href="#inline-level-box">inline-level box</a>, in § 2.1 <li><a href="#inline-level">inline-level content</a>, in § Unnumbered section <li><a href="#valdef-display-inline-table">inline-table</a>, in § 2.6 <li><a href="#inlinify">inlinification</a>, in § 2.7 <li><a href="#inlinify">inlinify</a>, in § 2.7 <li><a href="#inner-display-type">inner</a>, in § 2 <li><a href="#inner-display-type">inner display type</a>, in § 2 <li><a href="#valdef-order-integer"><integer></a>, in § 3 <li><a href="#internal-ruby-box">internal ruby box</a>, in § 2.4 <li><a href="#internal-ruby-element">internal ruby element</a>, in § 2.4 <li><a href="#internal-table-box">internal table box</a>, in § 2.4 <li><a href="#internal-table-element">internal table element</a>, in § 2.4 <li><a href="#invisible">Invisible</a>, in § 4 <li><a href="#layout-internal">layout-internal</a>, in § 2.4 <li><a href="#valdef-display-list-item">list-item</a>, in § 2.3 <li><a href="#valdef-display-none">none</a>, in § 2.5 <li><a href="#non-replaced">non-replaced</a>, in § Unnumbered section <li><a href="#non-replaced">non-replaced element</a>, in § Unnumbered section <li><a href="#propdef-order">order</a>, in § 3 <li><a href="#order-modified-document-order">order-modified document order</a>, in § 3 <li><a href="#outer-display-type">outer</a>, in § 2 <li><a href="#outer-display-type">outer display type</a>, in § 2 <li><a href="#out-of-flow">out of flow</a>, in § Unnumbered section <li><a href="#out-of-flow">out-of-flow</a>, in § Unnumbered section <li><a href="#css-parent-box">parent box</a>, in § 1 <li><a href="#principal-box">principal box</a>, in § Unnumbered section <li><a href="#replaced-element">replaced</a>, in § Unnumbered section <li><a href="#replaced-element">replaced element</a>, in § Unnumbered section <li><a href="#root-element">root element</a>, in § Unnumbered section <li><a href="#valdef-display-ruby">ruby</a>, in § 2.2 <li><a href="#valdef-display-ruby-base">ruby-base</a>, in § 2.4 <li><a href="#valdef-display-ruby-base-container">ruby-base-container</a>, in § 2.4 <li><a href="#valdef-display-ruby-text">ruby-text</a>, in § 2.4 <li><a href="#valdef-display-ruby-text-container">ruby-text-container</a>, in § 2.4 <li> run-in <ul> <li><a href="#run-in">definition of</a>, in § 5 <li><a href="#valdef-display-run-in">value for display, <display-outside></a>, in § 2.1 </ul> <li><a href="#run-in">run-in box</a>, in § 5 <li><a href="#run-in-sequence">run-in sequence</a>, in § 5 <li><a href="#valdef-display-table">table</a>, in § 2.2 <li><a href="#valdef-display-table-caption">table-caption</a>, in § 2.4 <li><a href="#table-caption-box">table caption box</a>, in § 2.4 <li><a href="#valdef-display-table-cell">table-cell</a>, in § 2.4 <li><a href="#valdef-display-table-column">table-column</a>, in § 2.4 <li><a href="#valdef-display-table-column-group">table-column-group</a>, in § 2.4 <li><a href="#valdef-display-table-footer-group">table-footer-group</a>, in § 2.4 <li><a href="#valdef-display-table-header-group">table-header-group</a>, in § 2.4 <li><a href="#valdef-display-table-row">table-row</a>, in § 2.4 <li><a href="#valdef-display-table-row-group">table-row-group</a>, in § 2.4 <li><a href="#text-nodes">text node</a>, in § 1 <li><a href="#css-text-sequence">text sequence</a>, in § 1 <li><a href="#propdef-visibility">visibility</a>, in § 4 <li><a href="#valdef-visibility-visible">visible</a>, in § 4 </ul> <aside aria-labelledby="infopaneltitle-for-264c0129e0554d76ad160b4b8cd1c0be" class="dfn-panel" data-for="264c0129e0554d76ad160b4b8cd1c0be" id="infopanel-for-264c0129e0554d76ad160b4b8cd1c0be"> Info about the 'align-content' external reference.<a href="https://www.w3.org/TR/css-align-3/#propdef-align-content">https://www.w3.org/TR/css-align-3/#propdef-align-content</a>Referenced in: <ul> <li><a href="#ref-for-propdef-align-content"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-51b162a623e23582947ab4ec6272f41c" class="dfn-panel" data-for="51b162a623e23582947ab4ec6272f41c" id="infopanel-for-51b162a623e23582947ab4ec6272f41c"> Info about the 'border' external reference.<a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border">https://www.w3.org/TR/css-backgrounds-3/#propdef-border</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border">1. Introduction</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-8589c21b4595332f1375848f866f258d" class="dfn-panel" data-for="8589c21b4595332f1375848f866f258d" id="infopanel-for-8589c21b4595332f1375848f866f258d"> Info about the 'box edge' external reference.<a href="https://www.w3.org/TR/css-box-4/#box-box-edge">https://www.w3.org/TR/css-box-4/#box-box-edge</a>Referenced in: <ul> <li><a href="#ref-for-box-box-edge"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-7d264afe8f1f293609df09254dbdcd86" class="dfn-panel" data-for="7d264afe8f1f293609df09254dbdcd86" id="infopanel-for-7d264afe8f1f293609df09254dbdcd86"> Info about the 'fragment' external reference.<a href="https://www.w3.org/TR/css-break-3/#fragment">https://www.w3.org/TR/css-break-3/#fragment</a>Referenced in: <ul> <li><a href="#ref-for-fragment">1. Introduction</a> <a href="#ref-for-fragment①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-52ba56f297e3f66940e9879011ca48e7" class="dfn-panel" data-for="52ba56f297e3f66940e9879011ca48e7" id="infopanel-for-52ba56f297e3f66940e9879011ca48e7"> Info about the 'box fragment' external reference.<a href="https://www.w3.org/TR/css-break-4/#box-fragment">https://www.w3.org/TR/css-break-4/#box-fragment</a>Referenced in: <ul> <li><a href="#ref-for-box-fragment">1. Introduction</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-abf01e3692ba1a6ce8ab89df0524e356" class="dfn-panel" data-for="abf01e3692ba1a6ce8ab89df0524e356" id="infopanel-for-abf01e3692ba1a6ce8ab89df0524e356"> Info about the 'fragmentation' external reference.<a href="https://www.w3.org/TR/css-break-4/#fragmentation">https://www.w3.org/TR/css-break-4/#fragmentation</a>Referenced in: <ul> <li><a href="#ref-for-fragmentation">1. Introduction</a> <a href="#ref-for-fragmentation①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-87ebaf0ebf08192327da44ccae89a3b2" class="dfn-panel" data-for="87ebaf0ebf08192327da44ccae89a3b2" id="infopanel-for-87ebaf0ebf08192327da44ccae89a3b2"> Info about the 'computed value' external reference.<a href="https://www.w3.org/TR/css-cascade-5/#computed-value">https://www.w3.org/TR/css-cascade-5/#computed-value</a>Referenced in: <ul> <li><a href="#ref-for-computed-value">1. Introduction</a> <li><a href="#ref-for-computed-value①">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-computed-value②">(2)</a> <li><a href="#ref-for-computed-value③"> Changes Since 2020 Candidate Recommendation</a> <a href="#ref-for-computed-value④">(2)</a> <a href="#ref-for-computed-value⑤">(3)</a> <li><a href="#ref-for-computed-value⑥"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-74699e35691667c78c5083fffedd426c" class="dfn-panel" data-for="74699e35691667c78c5083fffedd426c" id="infopanel-for-74699e35691667c78c5083fffedd426c"> Info about the 'inheritance' external reference.<a href="https://www.w3.org/TR/css-cascade-5/#inheritance">https://www.w3.org/TR/css-cascade-5/#inheritance</a>Referenced in: <ul> <li><a href="#ref-for-inheritance">2.5. Box Generation: the none and contents keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-20afff9a2eb8005069542c2b23a6cc13" class="dfn-panel" data-for="20afff9a2eb8005069542c2b23a6cc13" id="infopanel-for-20afff9a2eb8005069542c2b23a6cc13"> Info about the 'inherited property' external reference.<a href="https://www.w3.org/TR/css-cascade-5/#inherited-property">https://www.w3.org/TR/css-cascade-5/#inherited-property</a>Referenced in: <ul> <li><a href="#ref-for-inherited-property">1. Introduction</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-aefbd47d4fc4b8892093127c634e14e6" class="dfn-panel" data-for="aefbd47d4fc4b8892093127c634e14e6" id="infopanel-for-aefbd47d4fc4b8892093127c634e14e6"> Info about the 'specified value' external reference.<a href="https://www.w3.org/TR/css-cascade-5/#specified-value">https://www.w3.org/TR/css-cascade-5/#specified-value</a>Referenced in: <ul> <li><a href="#ref-for-specified-value">2.6. Precomposed Inline-level Display Values</a> <li><a href="#ref-for-specified-value①"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-bc817a09b350308f7ae302b8b6f20a86" class="dfn-panel" data-for="bc817a09b350308f7ae302b8b6f20a86" id="infopanel-for-bc817a09b350308f7ae302b8b6f20a86"> Info about the 'contain' external reference.<a href="https://www.w3.org/TR/css-contain-2/#propdef-contain">https://www.w3.org/TR/css-contain-2/#propdef-contain</a>Referenced in: <ul> <li><a href="#ref-for-propdef-contain"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-d156110db9087c6fd57aec3e90c3658f" class="dfn-panel" data-for="d156110db9087c6fd57aec3e90c3658f" id="infopanel-for-d156110db9087c6fd57aec3e90c3658f"> Info about the 'flex container' external reference.<a href="https://www.w3.org/TR/css-flexbox-1/#flex-container">https://www.w3.org/TR/css-flexbox-1/#flex-container</a>Referenced in: <ul> <li><a href="#ref-for-flex-container">2. Box Layout Modes: the display property</a> <a href="#ref-for-flex-container①">(2)</a> <li><a href="#ref-for-flex-container②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-flex-container③">3. Display Order: the order property</a> <a href="#ref-for-flex-container④">(2)</a> <li><a href="#ref-for-flex-container⑤"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-16860c02c5907bd349511fe02db38800" class="dfn-panel" data-for="16860c02c5907bd349511fe02db38800" id="infopanel-for-16860c02c5907bd349511fe02db38800"> Info about the 'flex formatting context' external reference.<a href="https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context">https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-flex-formatting-context">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-flex-formatting-context①"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-5f9656b21fffcd5c6de5818d30721782" class="dfn-panel" data-for="5f9656b21fffcd5c6de5818d30721782" id="infopanel-for-5f9656b21fffcd5c6de5818d30721782"> Info about the 'flex item' external reference.<a href="https://www.w3.org/TR/css-flexbox-1/#flex-item">https://www.w3.org/TR/css-flexbox-1/#flex-item</a>Referenced in: <ul> <li><a href="#ref-for-flex-item">3. Display Order: the order property</a> <a href="#ref-for-flex-item①">(2)</a> <a href="#ref-for-flex-item②">(3)</a> <a href="#ref-for-flex-item③">(4)</a> <a href="#ref-for-flex-item④">(5)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-db7842f51efc6b10632134e4b4c57c76" class="dfn-panel" data-for="db7842f51efc6b10632134e4b4c57c76" id="infopanel-for-db7842f51efc6b10632134e4b4c57c76"> Info about the 'flex layout' external reference.<a href="https://www.w3.org/TR/css-flexbox-1/#flex-layout">https://www.w3.org/TR/css-flexbox-1/#flex-layout</a>Referenced in: <ul> <li><a href="#ref-for-flex-layout"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-531b49211167857fe2726dd75da443d6" class="dfn-panel" data-for="531b49211167857fe2726dd75da443d6" id="infopanel-for-531b49211167857fe2726dd75da443d6"> Info about the 'grid container' external reference.<a href="https://www.w3.org/TR/css-grid-2/#grid-container">https://www.w3.org/TR/css-grid-2/#grid-container</a>Referenced in: <ul> <li><a href="#ref-for-grid-container">2. Box Layout Modes: the display property</a> <a href="#ref-for-grid-container①">(2)</a> <li><a href="#ref-for-grid-container②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-grid-container③">3. Display Order: the order property</a> <a href="#ref-for-grid-container④">(2)</a> <li><a href="#ref-for-grid-container⑤"> Appendix A: Glossary</a> <a href="#ref-for-grid-container⑥">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-a89e4a0f8aa9b0d2b50f0ae058ccc3f4" class="dfn-panel" data-for="a89e4a0f8aa9b0d2b50f0ae058ccc3f4" id="infopanel-for-a89e4a0f8aa9b0d2b50f0ae058ccc3f4"> Info about the 'grid formatting context' external reference.<a href="https://www.w3.org/TR/css-grid-2/#grid-formatting-context">https://www.w3.org/TR/css-grid-2/#grid-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-grid-formatting-context">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-grid-formatting-context①">(2)</a> <li><a href="#ref-for-grid-formatting-context②"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f6e7a472952be97ad69bb9f0e3dacdc7" class="dfn-panel" data-for="f6e7a472952be97ad69bb9f0e3dacdc7" id="infopanel-for-f6e7a472952be97ad69bb9f0e3dacdc7"> Info about the 'grid item' external reference.<a href="https://www.w3.org/TR/css-grid-2/#grid-item">https://www.w3.org/TR/css-grid-2/#grid-item</a>Referenced in: <ul> <li><a href="#ref-for-grid-item">3. Display Order: the order property</a> <a href="#ref-for-grid-item①">(2)</a> <a href="#ref-for-grid-item②">(3)</a> <a href="#ref-for-grid-item③">(4)</a> <a href="#ref-for-grid-item④">(5)</a> <li><a href="#ref-for-grid-item⑤"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-ef0839297fbb8984ca3205e297892e86" class="dfn-panel" data-for="ef0839297fbb8984ca3205e297892e86" id="infopanel-for-ef0839297fbb8984ca3205e297892e86"> Info about the 'subgrid' external reference.<a href="https://www.w3.org/TR/css-grid-2/#subgrid">https://www.w3.org/TR/css-grid-2/#subgrid</a>Referenced in: <ul> <li><a href="#ref-for-subgrid"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-8251ca3504726066e9a7f7a176e39d02" class="dfn-panel" data-for="8251ca3504726066e9a7f7a176e39d02" id="infopanel-for-8251ca3504726066e9a7f7a176e39d02"> Info about the 'subgrid (for grid-template-rows)' external reference.<a href="https://www.w3.org/TR/css-grid-2/#valdef-grid-template-rows-subgrid">https://www.w3.org/TR/css-grid-2/#valdef-grid-template-rows-subgrid</a>Referenced in: <ul> <li><a href="#ref-for-valdef-grid-template-rows-subgrid">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-5b4919b9f6e90201e2a58ef672d8eb5d" class="dfn-panel" data-for="5b4919b9f6e90201e2a58ef672d8eb5d" id="infopanel-for-5b4919b9f6e90201e2a58ef672d8eb5d"> Info about the 'natural dimension' external reference.<a href="https://www.w3.org/TR/css-images-3/#natural-dimensions">https://www.w3.org/TR/css-images-3/#natural-dimensions</a>Referenced in: <ul> <li><a href="#ref-for-natural-dimensions"> Appendix A: Glossary</a> <a href="#ref-for-natural-dimensions①">(2)</a> <a href="#ref-for-natural-dimensions②">(3)</a> <a href="#ref-for-natural-dimensions③">(4)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-649f99d0fd71d3af41bfe476a020b39e" class="dfn-panel" data-for="649f99d0fd71d3af41bfe476a020b39e" id="infopanel-for-649f99d0fd71d3af41bfe476a020b39e"> Info about the 'root inline box' external reference.<a href="https://www.w3.org/TR/css-inline-3/#root-inline-box">https://www.w3.org/TR/css-inline-3/#root-inline-box</a>Referenced in: <ul> <li><a href="#ref-for-root-inline-box"> Appendix A: Glossary</a> <a href="#ref-for-root-inline-box①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-6d9eb0561bff366c2414048518657f9a" class="dfn-panel" data-for="6d9eb0561bff366c2414048518657f9a" id="infopanel-for-6d9eb0561bff366c2414048518657f9a"> Info about the 'overflow' external reference.<a href="https://www.w3.org/TR/css-overflow-3/#overflow">https://www.w3.org/TR/css-overflow-3/#overflow</a>Referenced in: <ul> <li><a href="#ref-for-overflow"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-ff5d9e007b8d431899a23256710f132e" class="dfn-panel" data-for="ff5d9e007b8d431899a23256710f132e" id="infopanel-for-ff5d9e007b8d431899a23256710f132e"> Info about the 'scroll container' external reference.<a href="https://www.w3.org/TR/css-overflow-3/#scroll-container">https://www.w3.org/TR/css-overflow-3/#scroll-container</a>Referenced in: <ul> <li><a href="#ref-for-scroll-container"> Appendix A: Glossary</a> <a href="#ref-for-scroll-container①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f648d21f357cb2606463b22448b93c0f" class="dfn-panel" data-for="f648d21f357cb2606463b22448b93c0f" id="infopanel-for-f648d21f357cb2606463b22448b93c0f"> Info about the 'absolute position' external reference.<a href="https://www.w3.org/TR/css-position-3/#absolute-position">https://www.w3.org/TR/css-position-3/#absolute-position</a>Referenced in: <ul> <li><a href="#ref-for-absolute-position"> Appendix A: Glossary</a> <a href="#ref-for-absolute-position①">(2)</a> <li><a href="#ref-for-absolute-position②"> Changes Since 2019 Candidate Recommendation</a> <a href="#ref-for-absolute-position③">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-b7aa5f3ffdeac346662b8672533333fc" class="dfn-panel" data-for="b7aa5f3ffdeac346662b8672533333fc" id="infopanel-for-b7aa5f3ffdeac346662b8672533333fc"> Info about the 'absolutely position' external reference.<a href="https://www.w3.org/TR/css-position-3/#absolute-position">https://www.w3.org/TR/css-position-3/#absolute-position</a>Referenced in: <ul> <li><a href="#ref-for-absolute-position"> Appendix A: Glossary</a> <a href="#ref-for-absolute-position①">(2)</a> <li><a href="#ref-for-absolute-position②"> Changes Since 2019 Candidate Recommendation</a> <a href="#ref-for-absolute-position③">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-169f86fcfa3fe15e42dfe2c53073a5cb" class="dfn-panel" data-for="169f86fcfa3fe15e42dfe2c53073a5cb" id="infopanel-for-169f86fcfa3fe15e42dfe2c53073a5cb"> Info about the 'position' external reference.<a href="https://www.w3.org/TR/css-position-3/#propdef-position">https://www.w3.org/TR/css-position-3/#propdef-position</a>Referenced in: <ul> <li><a href="#ref-for-propdef-position">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-propdef-position①"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-7764579e80437c272b64b6d76bf8a3ea" class="dfn-panel" data-for="7764579e80437c272b64b6d76bf8a3ea" id="infopanel-for-7764579e80437c272b64b6d76bf8a3ea"> Info about the '::after' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after">https://www.w3.org/TR/css-pseudo-4/#selectordef-after</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-after">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-selectordef-after①"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3427c6653841a3f7f0f761df000efe88" class="dfn-panel" data-for="3427c6653841a3f7f0f761df000efe88" id="infopanel-for-3427c6653841a3f7f0f761df000efe88"> Info about the '::before' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before">https://www.w3.org/TR/css-pseudo-4/#selectordef-before</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-before">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-selectordef-before①">5. Run-In Layout</a> <li><a href="#ref-for-selectordef-before②"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-4e4389b8a9393c3fe5e34fa72ff7cadd" class="dfn-panel" data-for="4e4389b8a9393c3fe5e34fa72ff7cadd" id="infopanel-for-4e4389b8a9393c3fe5e34fa72ff7cadd"> Info about the '::first-letter' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter">https://www.w3.org/TR/css-pseudo-4/#selectordef-first-letter</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-first-letter">Unnumbered Section</a> <li><a href="#ref-for-selectordef-first-letter①">5. Run-In Layout</a> <li><a href="#ref-for-selectordef-first-letter②"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-selectordef-first-letter③">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-fa1dfa12e383278cf36c963c33865834" class="dfn-panel" data-for="fa1dfa12e383278cf36c963c33865834" id="infopanel-for-fa1dfa12e383278cf36c963c33865834"> Info about the '::first-line' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line">https://www.w3.org/TR/css-pseudo-4/#selectordef-first-line</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-first-line"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-6da4497c2d193c180d76eda6ce044d93" class="dfn-panel" data-for="6da4497c2d193c180d76eda6ce044d93" id="infopanel-for-6da4497c2d193c180d76eda6ce044d93"> Info about the '::marker' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker">https://www.w3.org/TR/css-pseudo-4/#selectordef-marker</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-marker">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-selectordef-marker①">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-selectordef-marker②">5. Run-In Layout</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-cf35c9ca6de1e1104769b72c1c0d5868" class="dfn-panel" data-for="cf35c9ca6de1e1104769b72c1c0d5868" id="infopanel-for-cf35c9ca6de1e1104769b72c1c0d5868"> Info about the 'first formatted line' external reference.<a href="https://www.w3.org/TR/css-pseudo-4/#first-formatted-line">https://www.w3.org/TR/css-pseudo-4/#first-formatted-line</a>Referenced in: <ul> <li><a href="#ref-for-first-formatted-line">5. Run-In Layout</a> <a href="#ref-for-first-formatted-line①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-93747628d46337a3cd8153871e4ab369" class="dfn-panel" data-for="93747628d46337a3cd8153871e4ab369" id="infopanel-for-93747628d46337a3cd8153871e4ab369"> Info about the 'ruby base container' external reference.<a href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box">https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box</a>Referenced in: <ul> <li><a href="#ref-for-ruby-base-container-box"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-e377842dd9faab7b1547b34dcf25ba8b" class="dfn-panel" data-for="e377842dd9faab7b1547b34dcf25ba8b" id="infopanel-for-e377842dd9faab7b1547b34dcf25ba8b"> Info about the 'ruby container' external reference.<a href="https://www.w3.org/TR/css-ruby-1/#ruby-container">https://www.w3.org/TR/css-ruby-1/#ruby-container</a>Referenced in: <ul> <li><a href="#ref-for-ruby-container">2. Box Layout Modes: the display property</a> <a href="#ref-for-ruby-container①">(2)</a> <li><a href="#ref-for-ruby-container②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-ruby-container③">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-ruby-container④"> Appendix A: Glossary</a> <a href="#ref-for-ruby-container⑤">(2)</a> <a href="#ref-for-ruby-container⑥">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-fc1370e8fb3ea3525084239b72d41370" class="dfn-panel" data-for="fc1370e8fb3ea3525084239b72d41370" id="infopanel-for-fc1370e8fb3ea3525084239b72d41370"> Info about the 'ruby formatting context' external reference.<a href="https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context">https://www.w3.org/TR/css-ruby-1/#ruby-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-ruby-formatting-context">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-ruby-formatting-context①">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-ruby-formatting-context②"> Appendix A: Glossary</a> <a href="#ref-for-ruby-formatting-context③">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-681ab337d0e6860aa472d0a3134afea3" class="dfn-panel" data-for="681ab337d0e6860aa472d0a3134afea3" id="infopanel-for-681ab337d0e6860aa472d0a3134afea3"> Info about the 'always' external reference.<a href="https://www.w3.org/TR/css-speech-1/#valdef-speak-always">https://www.w3.org/TR/css-speech-1/#valdef-speak-always</a>Referenced in: <ul> <li><a href="#ref-for-valdef-speak-always">4. Invisibility: the visibility property</a> <a href="#ref-for-valdef-speak-always①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-2cea9afe95ba9c335bdda645cb8f9a48" class="dfn-panel" data-for="2cea9afe95ba9c335bdda645cb8f9a48" id="infopanel-for-2cea9afe95ba9c335bdda645cb8f9a48"> Info about the 'table grid box' external reference.<a href="https://www.w3.org/TR/css-tables-3/#table-grid-box">https://www.w3.org/TR/css-tables-3/#table-grid-box</a>Referenced in: <ul> <li><a href="#ref-for-table-grid-box">1. Introduction</a> <li><a href="#ref-for-table-grid-box①">2. Box Layout Modes: the display property</a> <a href="#ref-for-table-grid-box②">(2)</a> <li><a href="#ref-for-table-grid-box③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-table-grid-box④"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-638d9855560f7160b3c9ccd25e3c5100" class="dfn-panel" data-for="638d9855560f7160b3c9ccd25e3c5100" id="infopanel-for-638d9855560f7160b3c9ccd25e3c5100"> Info about the 'table wrapper box' external reference.<a href="https://www.w3.org/TR/css-tables-3/#table-wrapper-box">https://www.w3.org/TR/css-tables-3/#table-wrapper-box</a>Referenced in: <ul> <li><a href="#ref-for-table-wrapper-box">1. Introduction</a> <li><a href="#ref-for-table-wrapper-box①">2. Box Layout Modes: the display property</a> <a href="#ref-for-table-wrapper-box②">(2)</a> <li><a href="#ref-for-table-wrapper-box③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-table-wrapper-box④"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-9fc034a174bffffd15c1c31ebb0f177d" class="dfn-panel" data-for="9fc034a174bffffd15c1c31ebb0f177d" id="infopanel-for-9fc034a174bffffd15c1c31ebb0f177d"> Info about the 'white space' external reference.<a href="https://www.w3.org/TR/css-text-4/#white-space">https://www.w3.org/TR/css-text-4/#white-space</a>Referenced in: <ul> <li><a href="#ref-for-white-space">5. Run-In Layout</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3426eed26775fd60b7a9bc3d92df84c8" class="dfn-panel" data-for="3426eed26775fd60b7a9bc3d92df84c8" id="infopanel-for-3426eed26775fd60b7a9bc3d92df84c8"> Info about the 'pointer-events' external reference.<a href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events">https://drafts.csswg.org/css-ui-4/#propdef-pointer-events</a>Referenced in: <ul> <li><a href="#ref-for-propdef-pointer-events">4. Invisibility: the visibility property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-809886eed649697b04ac9d4bd1192239" class="dfn-panel" data-for="809886eed649697b04ac9d4bd1192239" id="infopanel-for-809886eed649697b04ac9d4bd1192239"> Info about the '&&' external reference.<a href="https://www.w3.org/TR/css-values-4/#comb-all">https://www.w3.org/TR/css-values-4/#comb-all</a>Referenced in: <ul> <li><a href="#ref-for-comb-all">2. Box Layout Modes: the display property</a> <a href="#ref-for-comb-all①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-96fea3339ea7894129c671e62b12c766" class="dfn-panel" data-for="96fea3339ea7894129c671e62b12c766" id="infopanel-for-96fea3339ea7894129c671e62b12c766"> Info about the '<integer>' external reference.<a href="https://www.w3.org/TR/css-values-4/#integer-value">https://www.w3.org/TR/css-values-4/#integer-value</a>Referenced in: <ul> <li><a href="#ref-for-integer-value">3. Display Order: the order property</a> <a href="#ref-for-integer-value①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-4373bc69f46aedba387d3d1565e1ae01" class="dfn-panel" data-for="4373bc69f46aedba387d3d1565e1ae01" id="infopanel-for-4373bc69f46aedba387d3d1565e1ae01"> Info about the '?' external reference.<a href="https://www.w3.org/TR/css-values-4/#mult-opt">https://www.w3.org/TR/css-values-4/#mult-opt</a>Referenced in: <ul> <li><a href="#ref-for-mult-opt">2. Box Layout Modes: the display property</a> <a href="#ref-for-mult-opt①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f014258978db0b5cb28d306e0a9068b1" class="dfn-panel" data-for="f014258978db0b5cb28d306e0a9068b1" id="infopanel-for-f014258978db0b5cb28d306e0a9068b1"> Info about the 'css-wide keywords' external reference.<a href="https://www.w3.org/TR/css-values-4/#css-wide-keywords">https://www.w3.org/TR/css-values-4/#css-wide-keywords</a>Referenced in: <ul> <li><a href="#ref-for-css-wide-keywords">1.2. Value Definitions</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-63f2f251f3aa0bf36028f290b3f6aba0" class="dfn-panel" data-for="63f2f251f3aa0bf36028f290b3f6aba0" id="infopanel-for-63f2f251f3aa0bf36028f290b3f6aba0"> Info about the '|' external reference.<a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a>Referenced in: <ul> <li><a href="#ref-for-comb-one">2. Box Layout Modes: the display property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a> <a href="#ref-for-comb-one①⓪">(11)</a> <a href="#ref-for-comb-one①①">(12)</a> <a href="#ref-for-comb-one①②">(13)</a> <a href="#ref-for-comb-one①③">(14)</a> <a href="#ref-for-comb-one①④">(15)</a> <a href="#ref-for-comb-one①⑤">(16)</a> <a href="#ref-for-comb-one①⑥">(17)</a> <a href="#ref-for-comb-one①⑦">(18)</a> <a href="#ref-for-comb-one①⑧">(19)</a> <a href="#ref-for-comb-one①⑨">(20)</a> <a href="#ref-for-comb-one②⓪">(21)</a> <a href="#ref-for-comb-one②①">(22)</a> <a href="#ref-for-comb-one②②">(23)</a> <a href="#ref-for-comb-one②③">(24)</a> <a href="#ref-for-comb-one②④">(25)</a> <a href="#ref-for-comb-one②⑤">(26)</a> <a href="#ref-for-comb-one②⑥">(27)</a> <li><a href="#ref-for-comb-one②⑦">4. Invisibility: the visibility property</a> <a href="#ref-for-comb-one②⑧">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-2421c65c76a70f9151ba02cfcf7cc94f" class="dfn-panel" data-for="2421c65c76a70f9151ba02cfcf7cc94f" id="infopanel-for-2421c65c76a70f9151ba02cfcf7cc94f"> Info about the '||' external reference.<a href="https://www.w3.org/TR/css-values-4/#comb-any">https://www.w3.org/TR/css-values-4/#comb-any</a>Referenced in: <ul> <li><a href="#ref-for-comb-any">2. Box Layout Modes: the display property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-0c3a6c45ae70a924bdc2fc4bf14a4dda" class="dfn-panel" data-for="0c3a6c45ae70a924bdc2fc4bf14a4dda" id="infopanel-for-0c3a6c45ae70a924bdc2fc4bf14a4dda"> Info about the 'speak' external reference.<a href="https://www.w3.org/TR/CSS21/aural.html#propdef-speak">https://www.w3.org/TR/CSS21/aural.html#propdef-speak</a>Referenced in: <ul> <li><a href="#ref-for-propdef-speak">4. Invisibility: the visibility property</a> <a href="#ref-for-propdef-speak①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3a20b9e295f1409d429af05f9f7eed23" class="dfn-panel" data-for="3a20b9e295f1409d429af05f9f7eed23" id="infopanel-for-3a20b9e295f1409d429af05f9f7eed23"> Info about the 'float' external reference.<a href="https://drafts.csswg.org/css2/#propdef-float">https://drafts.csswg.org/css2/#propdef-float</a>Referenced in: <ul> <li><a href="#ref-for-propdef-float">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-propdef-float①"> Appendix A: Glossary</a> <a href="#ref-for-propdef-float②">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-2676a102fb8fdb630545ccc59bd1c510" class="dfn-panel" data-for="2676a102fb8fdb630545ccc59bd1c510" id="infopanel-for-2676a102fb8fdb630545ccc59bd1c510"> Info about the 'list-style' external reference.<a href="https://drafts.csswg.org/css2/#propdef-list-style">https://drafts.csswg.org/css2/#propdef-list-style</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style">2.3. Generating Marker Boxes: the list-item keyword</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-9ca775e57d7c7b6a2b2318b64ef1e75d" class="dfn-panel" data-for="9ca775e57d7c7b6a2b2318b64ef1e75d" id="infopanel-for-9ca775e57d7c7b6a2b2318b64ef1e75d"> Info about the 'overflow' external reference.<a href="https://drafts.csswg.org/css2/#propdef-overflow">https://drafts.csswg.org/css2/#propdef-overflow</a>Referenced in: <ul> <li><a href="#ref-for-propdef-overflow">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-propdef-overflow①"> Appendix A: Glossary</a> <li><a href="#ref-for-propdef-overflow②"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-cba4e4c24af6200cb8f4798a079f6374" class="dfn-panel" data-for="cba4e4c24af6200cb8f4798a079f6374" id="infopanel-for-cba4e4c24af6200cb8f4798a079f6374"> Info about the 'getComputedStyle(elt)' external reference.<a href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle">https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle</a>Referenced in: <ul> <li><a href="#ref-for-dom-window-getcomputedstyle">1. Introduction</a> <li><a href="#ref-for-dom-window-getcomputedstyle①">2.6. Precomposed Inline-level Display Values</a> <li><a href="#ref-for-dom-window-getcomputedstyle②"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-6780f5129791c577e5710641ce0e787a" class="dfn-panel" data-for="6780f5129791c577e5710641ce0e787a" id="infopanel-for-6780f5129791c577e5710641ce0e787a"> Info about the 'document element' external reference.<a href="https://dom.spec.whatwg.org/#document-element">https://dom.spec.whatwg.org/#document-element</a>Referenced in: <ul> <li><a href="#ref-for-document-element"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f1301b61cfeb75f8a69ab020eeefb72d" class="dfn-panel" data-for="f1301b61cfeb75f8a69ab020eeefb72d" id="infopanel-for-f1301b61cfeb75f8a69ab020eeefb72d"> Info about the 'document tree' external reference.<a href="https://dom.spec.whatwg.org/#concept-document-tree">https://dom.spec.whatwg.org/#concept-document-tree</a>Referenced in: <ul> <li><a href="#ref-for-concept-document-tree"> Appendix A: Glossary</a> <a href="#ref-for-concept-document-tree①">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f8cb243adf07aaf1d10636b3de4677bc" class="dfn-panel" data-for="f8cb243adf07aaf1d10636b3de4677bc" id="infopanel-for-f8cb243adf07aaf1d10636b3de4677bc"> Info about the 'audio' external reference.<a href="https://html.spec.whatwg.org/multipage/media.html#audio">https://html.spec.whatwg.org/multipage/media.html#audio</a>Referenced in: <ul> <li><a href="#ref-for-audio">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-de08280304844024757560d37d7f95bb" class="dfn-panel" data-for="de08280304844024757560d37d7f95bb" id="infopanel-for-de08280304844024757560d37d7f95bb"> Info about the 'body' external reference.<a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a>Referenced in: <ul> <li><a href="#ref-for-the-body-element"> Changes Since 2019 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-7350f4b942f5f87e385e8fe956bb43a9" class="dfn-panel" data-for="7350f4b942f5f87e385e8fe956bb43a9" id="infopanel-for-7350f4b942f5f87e385e8fe956bb43a9"> Info about the 'br' external reference.<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element</a>Referenced in: <ul> <li><a href="#ref-for-the-br-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-6805f2851bce8faacb4b0028a8bab222" class="dfn-panel" data-for="6805f2851bce8faacb4b0028a8bab222" id="infopanel-for-6805f2851bce8faacb4b0028a8bab222"> Info about the 'button' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element</a>Referenced in: <ul> <li><a href="#ref-for-the-button-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-ef9f3598c7eea4603a0d0af8b90568bf" class="dfn-panel" data-for="ef9f3598c7eea4603a0d0af8b90568bf" id="infopanel-for-ef9f3598c7eea4603a0d0af8b90568bf"> Info about the 'canvas' external reference.<a href="https://html.spec.whatwg.org/multipage/canvas.html#canvas">https://html.spec.whatwg.org/multipage/canvas.html#canvas</a>Referenced in: <ul> <li><a href="#ref-for-canvas">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-82ff55c55d4203f0e01b21eadca9d575" class="dfn-panel" data-for="82ff55c55d4203f0e01b21eadca9d575" id="infopanel-for-82ff55c55d4203f0e01b21eadca9d575"> Info about the 'details' external reference.<a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element</a>Referenced in: <ul> <li><a href="#ref-for-the-details-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-7b9ed949488d064eaadfddd322502448" class="dfn-panel" data-for="7b9ed949488d064eaadfddd322502448" id="infopanel-for-7b9ed949488d064eaadfddd322502448"> Info about the 'embed' external reference.<a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element</a>Referenced in: <ul> <li><a href="#ref-for-the-embed-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-17987d37fb415701b6b82fb38e72d273" class="dfn-panel" data-for="17987d37fb415701b6b82fb38e72d273" id="infopanel-for-17987d37fb415701b6b82fb38e72d273"> Info about the 'fieldset' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element</a>Referenced in: <ul> <li><a href="#ref-for-the-fieldset-element">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-the-fieldset-element①">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-87b3b219a3994db1a915d52c6037f86d" class="dfn-panel" data-for="87b3b219a3994db1a915d52c6037f86d" id="infopanel-for-87b3b219a3994db1a915d52c6037f86d"> Info about the 'frame' external reference.<a href="https://html.spec.whatwg.org/multipage/obsolete.html#frame">https://html.spec.whatwg.org/multipage/obsolete.html#frame</a>Referenced in: <ul> <li><a href="#ref-for-frame">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-5c871f87152bb98fe435f119d439fa6e" class="dfn-panel" data-for="5c871f87152bb98fe435f119d439fa6e" id="infopanel-for-5c871f87152bb98fe435f119d439fa6e"> Info about the 'frameset' external reference.<a href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset">https://html.spec.whatwg.org/multipage/obsolete.html#frameset</a>Referenced in: <ul> <li><a href="#ref-for-frameset">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-0d681097da919d9909a08fd2cfa9f403" class="dfn-panel" data-for="0d681097da919d9909a08fd2cfa9f403" id="infopanel-for-0d681097da919d9909a08fd2cfa9f403"> Info about the 'html' external reference.<a href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element">https://html.spec.whatwg.org/multipage/semantics.html#the-html-element</a>Referenced in: <ul> <li><a href="#ref-for-the-html-element"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-baf95ce8d0404079723db392663d355e" class="dfn-panel" data-for="baf95ce8d0404079723db392663d355e" id="infopanel-for-baf95ce8d0404079723db392663d355e"> Info about the 'iframe' external reference.<a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element</a>Referenced in: <ul> <li><a href="#ref-for-the-iframe-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-abfedd7f01779095e32057f505b061f5" class="dfn-panel" data-for="abfedd7f01779095e32057f505b061f5" id="infopanel-for-abfedd7f01779095e32057f505b061f5"> Info about the 'img' external reference.<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a>Referenced in: <ul> <li><a href="#ref-for-the-img-element"> Appendix A: Glossary</a> <li><a href="#ref-for-the-img-element①"> Appendix B: Effects of display: contents on Unusual Elements</a> <li><a href="#ref-for-the-img-element②">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-af899b67eb43fee00a1337cae194bbce" class="dfn-panel" data-for="af899b67eb43fee00a1337cae194bbce" id="infopanel-for-af899b67eb43fee00a1337cae194bbce"> Info about the 'input' external reference.<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">https://html.spec.whatwg.org/multipage/input.html#the-input-element</a>Referenced in: <ul> <li><a href="#ref-for-the-input-element"> Appendix B: Effects of display: contents on Unusual Elements</a> <li><a href="#ref-for-the-input-element①">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-51da25f561c5a75951f516113410ff18" class="dfn-panel" data-for="51da25f561c5a75951f516113410ff18" id="infopanel-for-51da25f561c5a75951f516113410ff18"> Info about the 'legend' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element</a>Referenced in: <ul> <li><a href="#ref-for-the-legend-element">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-the-legend-element①">HTML Elements</a> <a href="#ref-for-the-legend-element②">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-052a447888e9e648abb502a3dded516e" class="dfn-panel" data-for="052a447888e9e648abb502a3dded516e" id="infopanel-for-052a447888e9e648abb502a3dded516e"> Info about the 'meter' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element</a>Referenced in: <ul> <li><a href="#ref-for-the-meter-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-ae15d0437ae3f964a64bae1b4d6ae836" class="dfn-panel" data-for="ae15d0437ae3f964a64bae1b4d6ae836" id="infopanel-for-ae15d0437ae3f964a64bae1b4d6ae836"> Info about the 'object' external reference.<a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element</a>Referenced in: <ul> <li><a href="#ref-for-the-object-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-403937f90cedf8b3a2e9802d027702be" class="dfn-panel" data-for="403937f90cedf8b3a2e9802d027702be" id="infopanel-for-403937f90cedf8b3a2e9802d027702be"> Info about the 'progress' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element</a>Referenced in: <ul> <li><a href="#ref-for-the-progress-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3f907a576970c424ae7a94ecf5cf8519" class="dfn-panel" data-for="3f907a576970c424ae7a94ecf5cf8519" id="infopanel-for-3f907a576970c424ae7a94ecf5cf8519"> Info about the 'rendered legend' external reference.<a href="https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend">https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend</a>Referenced in: <ul> <li><a href="#ref-for-rendered-legend">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3fff2218abea20e2aebc96a3c4ed942d" class="dfn-panel" data-for="3fff2218abea20e2aebc96a3c4ed942d" id="infopanel-for-3fff2218abea20e2aebc96a3c4ed942d"> Info about the 'select' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element</a>Referenced in: <ul> <li><a href="#ref-for-the-select-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-b5903f72edc1b81cef8cf7fff8a6ce45" class="dfn-panel" data-for="b5903f72edc1b81cef8cf7fff8a6ce45" id="infopanel-for-b5903f72edc1b81cef8cf7fff8a6ce45"> Info about the 'src' external reference.<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src">https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src</a>Referenced in: <ul> <li><a href="#ref-for-attr-img-src"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-9831182184bff8cb17d0e1b5129bd887" class="dfn-panel" data-for="9831182184bff8cb17d0e1b5129bd887" id="infopanel-for-9831182184bff8cb17d0e1b5129bd887"> Info about the 'summary' external reference.<a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element</a>Referenced in: <ul> <li><a href="#ref-for-the-summary-element">2.5. Box Generation: the none and contents keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-c82ecefb5866f61611639536f749c1d7" class="dfn-panel" data-for="c82ecefb5866f61611639536f749c1d7" id="infopanel-for-c82ecefb5866f61611639536f749c1d7"> Info about the 'textarea' external reference.<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element</a>Referenced in: <ul> <li><a href="#ref-for-the-textarea-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-fec6bca317a97af3ec1a865ccbce94de" class="dfn-panel" data-for="fec6bca317a97af3ec1a865ccbce94de" id="infopanel-for-fec6bca317a97af3ec1a865ccbce94de"> Info about the 'video' external reference.<a href="https://html.spec.whatwg.org/multipage/media.html#video">https://html.spec.whatwg.org/multipage/media.html#video</a>Referenced in: <ul> <li><a href="#ref-for-video">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-e9192a678af819ace405c601adf0ac6e" class="dfn-panel" data-for="e9192a678af819ace405c601adf0ac6e" id="infopanel-for-e9192a678af819ace405c601adf0ac6e"> Info about the 'wbr' external reference.<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element</a>Referenced in: <ul> <li><a href="#ref-for-the-wbr-element">HTML Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-ccb0613d6ec03417e471231c7d125dd1" class="dfn-panel" data-for="ccb0613d6ec03417e471231c7d125dd1" id="infopanel-for-ccb0613d6ec03417e471231c7d125dd1"> Info about the 'continuous media' external reference.<a href="https://www.w3.org/TR/mediaqueries-5/#continuous-media">https://www.w3.org/TR/mediaqueries-5/#continuous-media</a>Referenced in: <ul> <li><a href="#ref-for-continuous-media"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-3b468ad698332aa40f919fefa3eb60f2" class="dfn-panel" data-for="3b468ad698332aa40f919fefa3eb60f2" id="infopanel-for-3b468ad698332aa40f919fefa3eb60f2"> Info about the 'paged media' external reference.<a href="https://www.w3.org/TR/mediaqueries-5/#paged-media">https://www.w3.org/TR/mediaqueries-5/#paged-media</a>Referenced in: <ul> <li><a href="#ref-for-paged-media"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-8853e7cc4488fc26cfda4fa5f64f5e9f" class="dfn-panel" data-for="8853e7cc4488fc26cfda4fa5f64f5e9f" id="infopanel-for-8853e7cc4488fc26cfda4fa5f64f5e9f"> Info about the 'document language' external reference.<a href="https://www.w3.org/TR/selectors-4/#document-language">https://www.w3.org/TR/selectors-4/#document-language</a>Referenced in: <ul> <li><a href="#ref-for-document-language">2. Box Layout Modes: the display property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-7ebdc5912b946b8461d17475c13b8b51" class="dfn-panel" data-for="7ebdc5912b946b8461d17475c13b8b51" id="infopanel-for-7ebdc5912b946b8461d17475c13b8b51"> Info about the 'pseudo-element' external reference.<a href="https://www.w3.org/TR/selectors-4/#pseudo-element">https://www.w3.org/TR/selectors-4/#pseudo-element</a>Referenced in: <ul> <li><a href="#ref-for-pseudo-element">1. Introduction</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-a7493dacc2d343d86ce8927aa42fa914" class="dfn-panel" data-for="a7493dacc2d343d86ce8927aa42fa914" id="infopanel-for-a7493dacc2d343d86ce8927aa42fa914"> Info about the 'container element' external reference.<a href="https://www.w3.org/TR/SVG2/struct.html#container-element">https://www.w3.org/TR/SVG2/struct.html#container-element</a>Referenced in: <ul> <li><a href="#ref-for-container-element">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-f3e9ca2e3b2f038411316e030ce44441" class="dfn-panel" data-for="f3e9ca2e3b2f038411316e030ce44441" id="infopanel-for-f3e9ca2e3b2f038411316e030ce44441"> Info about the 'non-rendered element' external reference.<a href="https://www.w3.org/TR/SVG2/render.html#TermNonRenderedElement">https://www.w3.org/TR/SVG2/render.html#TermNonRenderedElement</a>Referenced in: <ul> <li><a href="#ref-for-TermNonRenderedElement">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-eb513f4a7ea09b118b885a853640110d" class="dfn-panel" data-for="eb513f4a7ea09b118b885a853640110d" id="infopanel-for-eb513f4a7ea09b118b885a853640110d"> Info about the 'pattern' external reference.<a href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern">https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-pattern">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-263c860b28a424d536f96f37558b1548" class="dfn-panel" data-for="263c860b28a424d536f96f37558b1548" id="infopanel-for-263c860b28a424d536f96f37558b1548"> Info about the 'presentation attributes' external reference.<a href="https://www.w3.org/TR/SVG2/styling.html#TermPresentationAttribute">https://www.w3.org/TR/SVG2/styling.html#TermPresentationAttribute</a>Referenced in: <ul> <li><a href="#ref-for-TermPresentationAttribute">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-8f28e780a370837cb380a85882963996" class="dfn-panel" data-for="8f28e780a370837cb380a85882963996" id="infopanel-for-8f28e780a370837cb380a85882963996"> Info about the 'renderable element' external reference.<a href="https://www.w3.org/TR/SVG2/render.html#TermRenderableElement">https://www.w3.org/TR/SVG2/render.html#TermRenderableElement</a>Referenced in: <ul> <li><a href="#ref-for-TermRenderableElement">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-9b732d4f4be3bf47b7b3de3bcc04a3f1" class="dfn-panel" data-for="9b732d4f4be3bf47b7b3de3bcc04a3f1" id="infopanel-for-9b732d4f4be3bf47b7b3de3bcc04a3f1"> Info about the 'rendered element' external reference.<a href="https://www.w3.org/TR/SVG2/render.html#TermRenderedElement">https://www.w3.org/TR/SVG2/render.html#TermRenderedElement</a>Referenced in: <ul> <li><a href="#ref-for-TermRenderedElement">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-30fc1e53bbd92c50207561b2d2b76238" class="dfn-panel" data-for="30fc1e53bbd92c50207561b2d2b76238" id="infopanel-for-30fc1e53bbd92c50207561b2d2b76238"> Info about the 'svg' external reference.<a href="https://www.w3.org/TR/SVG2/struct.html#elementdef-svg">https://www.w3.org/TR/SVG2/struct.html#elementdef-svg</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-svg">SVG Elements</a> <a href="#ref-for-elementdef-svg①">(2)</a> <a href="#ref-for-elementdef-svg②">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-fe8a26f6e05d4d82d6e4ab8868b9ce89" class="dfn-panel" data-for="fe8a26f6e05d4d82d6e4ab8868b9ce89" id="infopanel-for-fe8a26f6e05d4d82d6e4ab8868b9ce89"> Info about the 'symbol' external reference.<a href="https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol">https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-symbol">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-e19b0ee325086dde2eafc6ec4e67b453" class="dfn-panel" data-for="e19b0ee325086dde2eafc6ec4e67b453" id="infopanel-for-e19b0ee325086dde2eafc6ec4e67b453"> Info about the 'text' external reference.<a href="https://www.w3.org/TR/SVG2/text.html#elementdef-text">https://www.w3.org/TR/SVG2/text.html#elementdef-text</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-text">SVG Elements</a> <a href="#ref-for-elementdef-text①">(2)</a> <a href="#ref-for-elementdef-text②">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-a95fec67bc4f313dec984d1ba2391213" class="dfn-panel" data-for="a95fec67bc4f313dec984d1ba2391213" id="infopanel-for-a95fec67bc4f313dec984d1ba2391213"> Info about the 'text content child element' external reference.<a href="https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement">https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement</a>Referenced in: <ul> <li><a href="#ref-for-TermTextContentChildElement">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-c863211d11b2ae9d1fbaad7d24a8882c" class="dfn-panel" data-for="c863211d11b2ae9d1fbaad7d24a8882c" id="infopanel-for-c863211d11b2ae9d1fbaad7d24a8882c"> Info about the 'textpath' external reference.<a href="https://www.w3.org/TR/SVG2/text.html#elementdef-textPath">https://www.w3.org/TR/SVG2/text.html#elementdef-textPath</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-textPath">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-83e53f7bd90f527eee93737fc5889c50" class="dfn-panel" data-for="83e53f7bd90f527eee93737fc5889c50" id="infopanel-for-83e53f7bd90f527eee93737fc5889c50"> Info about the 'tspan' external reference.<a href="https://www.w3.org/TR/SVG2/text.html#elementdef-tspan">https://www.w3.org/TR/SVG2/text.html#elementdef-tspan</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-tspan">SVG Elements</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-dc8aacbe24450748ef79c396397c5402" class="dfn-panel" data-for="dc8aacbe24450748ef79c396397c5402" id="infopanel-for-dc8aacbe24450748ef79c396397c5402"> Info about the 'use' external reference.<a href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use">https://www.w3.org/TR/SVG2/struct.html#elementdef-use</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-use">SVG Elements</a> <a href="#ref-for-elementdef-use①">(2)</a> </ul> </aside> <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-ALIGN-3]</a> defines the following terms: <ul> <li>align-content </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>border </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>box edge </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>fragment </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment <li>fragmentation </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>inheritance <li>inherited property <li>specified value </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>contain </ul> <li> <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms: <ul> <li>flex container <li>flex formatting context <li>flex item <li>flex layout </ul> <li> <a data-link-type="biblio">[CSS-GRID-2]</a> defines the following terms: <ul> <li>grid container <li>grid formatting context <li>grid item <li>subgrid <li>subgrid (for grid-template-rows) </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li>natural dimension </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>root inline box </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>overflow <li>scroll container </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>absolute position <li>absolutely position <li>position </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::after <li>::before <li>::first-letter <li>::first-line <li>::marker <li>first formatted line </ul> <li> <a data-link-type="biblio">[CSS-RUBY-1]</a> defines the following terms: <ul> <li>ruby base container <li>ruby container <li>ruby formatting context </ul> <li> <a data-link-type="biblio">[CSS-SPEECH-1]</a> defines the following terms: <ul> <li>always </ul> <li> <a data-link-type="biblio">[CSS-TABLES-3]</a> defines the following terms: <ul> <li>table grid box <li>table wrapper box </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>white space </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>pointer-events </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>&& <li><integer> <li>? <li>css-wide keywords <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>speak </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>float <li>list-style <li>overflow </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>getComputedStyle(elt) </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>document element <li>document tree </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>audio <li>body <li>br <li>button <li>canvas <li>details <li>embed <li>fieldset <li>frame <li>frameset <li>html <li>iframe <li>img <li>input <li>legend <li>meter <li>object <li>progress <li>rendered legend <li>select <li>src <li>summary <li>textarea <li>video <li>wbr </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>continuous media <li>paged media </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>document language <li>pseudo-element </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>container element <li>non-rendered element <li>pattern <li>presentation attributes <li>renderable element <li>rendered element <li>svg <li>symbol <li>text <li>text content child element <li>textpath <li>tspan <li>use </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://www.w3.org/TR/css-align-3/"><cite>CSS Box Alignment Module Level 3</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 14 February 2023. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 3 November 2022. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/"><cite>CSS Fragmentation Module Level 3</cite></a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a> <dt id="biblio-css-cascade-3">[CSS-CASCADE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/"><cite>CSS Cascading and Inheritance Level 3</cite></a>. 11 February 2021. REC. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://www.w3.org/TR/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. 17 September 2022. WD. URL: <a href="https://www.w3.org/TR/css-contain-2/">https://www.w3.org/TR/css-contain-2/</a> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> <dt id="biblio-css-grid-1">[CSS-GRID-1] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-grid-1/"><cite>CSS Grid Layout Module Level 1</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a> <dt id="biblio-css-grid-2">[CSS-GRID-2] <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 17 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Dave Cramer; Elika Etemad. <a href="https://www.w3.org/TR/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. 14 November 2022. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 21 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. 18 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. 30 December 2022. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a> <dt id="biblio-css-ruby-1">[CSS-RUBY-1] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-ruby-1/"><cite>CSS Ruby Annotation Layout Module Level 1</cite></a>. 31 December 2022. WD. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a> <dt id="biblio-css-speech-1">[CSS-SPEECH-1] <dd>Léonie Watson; Elika Etemad. <a href="https://www.w3.org/TR/css-speech-1/"><cite>CSS Speech Module Level 1</cite></a>. 14 February 2023. CR. URL: <a href="https://www.w3.org/TR/css-speech-1/">https://www.w3.org/TR/css-speech-1/</a> <dt id="biblio-css-tables-3">[CSS-TABLES-3] <dd>François Remy; Greg Whitworth; David Baron. <a href="https://www.w3.org/TR/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. 27 July 2019. WD. URL: <a href="https://www.w3.org/TR/css-tables-3/">https://www.w3.org/TR/css-tables-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. 1 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. 16 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 1 December 2022. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 19 October 2022. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. 12 April 2016. WD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-cssom">[CSSOM] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://www.w3.org/TR/cssom-1/"><cite>CSS Object Model (CSSOM)</cite></a>. 26 August 2021. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. 18 December 2021. WD. URL: <a href="https://www.w3.org/TR/mediaqueries-5/">https://www.w3.org/TR/mediaqueries-5/</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-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 11 November 2022. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</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-css3-exclusions">[CSS3-EXCLUSIONS] <dd>Rossen Atanassov; Vincent Hardy; Alan Stearns. <a href="https://www.w3.org/TR/css3-exclusions/"><cite>CSS Exclusions Module Level 1</cite></a>. 15 January 2015. WD. URL: <a href="https://www.w3.org/TR/css3-exclusions/">https://www.w3.org/TR/css3-exclusions/</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">Media <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑦④">display</a> <td>[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> <td>inline <td>all elements <td>no <td>n/a <td>not animatable <td>per grammar <td>a pair of keywords representing the inner and outer display types plus optional list-item flag, or a <display-internal> or <display-box> keyword; see prose in a variety of specs for computation rules <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-order" id="ref-for-propdef-order①⑦">order</a> <td><integer> <td>0 <td>flex items and grid items <td>no <td>n/a <td>by computed value type <td>per grammar <td>specified integer <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-visibility" id="ref-for-propdef-visibility⑥">visibility</a> <td>visible | hidden | collapse <td>visible <td>all elements <td>yes <td>N/A <td>discrete <td>per grammar <td>as specified <td>visual </table> </div> <aside aria-labelledby="infopaneltitle-for-element-tree" class="dfn-panel" data-for="element-tree" id="infopanel-for-element-tree"> Info about the 'tree' definition.<a href="#element-tree">#element-tree</a>Referenced in: <ul> <li><a href="#ref-for-element-tree">1. Introduction</a> <li><a href="#ref-for-element-tree①">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-element-tree②"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-elements" class="dfn-panel" data-for="elements" id="infopanel-for-elements"> Info about the 'elements' definition.<a href="#elements">#elements</a>Referenced in: <ul> <li><a href="#ref-for-elements">1. Introduction</a> <a href="#ref-for-elements①">(2)</a> <a href="#ref-for-elements②">(3)</a> <a href="#ref-for-elements③">(4)</a> <a href="#ref-for-elements④">(5)</a> <a href="#ref-for-elements⑤">(6)</a> <li><a href="#ref-for-elements⑥">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-elements⑦"> Appendix A: Glossary</a> <a href="#ref-for-elements⑧">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-text-nodes" class="dfn-panel" data-for="text-nodes" id="infopanel-for-text-nodes"> Info about the 'text nodes' definition.<a href="#text-nodes">#text-nodes</a>Referenced in: <ul> <li><a href="#ref-for-text-nodes">1. Introduction</a> <a href="#ref-for-text-nodes①">(2)</a> <a href="#ref-for-text-nodes②">(3)</a> <a href="#ref-for-text-nodes③">(4)</a> <a href="#ref-for-text-nodes④">(5)</a> <li><a href="#ref-for-text-nodes⑤">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-text-nodes⑥"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-box-tree" class="dfn-panel" data-for="box-tree" id="infopanel-for-box-tree"> Info about the 'box tree' definition.<a href="#box-tree">#box-tree</a>Referenced in: <ul> <li><a href="#ref-for-box-tree">1. Introduction</a> <a href="#ref-for-box-tree①">(2)</a> <a href="#ref-for-box-tree②">(3)</a> <a href="#ref-for-box-tree③">(4)</a> <a href="#ref-for-box-tree④">(5)</a> <a href="#ref-for-box-tree⑤">(6)</a> <a href="#ref-for-box-tree⑥">(7)</a> <li><a href="#ref-for-box-tree⑦">2. Box Layout Modes: the display property</a> <a href="#ref-for-box-tree⑧">(2)</a> <li><a href="#ref-for-box-tree⑨"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-box" class="dfn-panel" data-for="box" id="infopanel-for-box"> Info about the 'box' definition.<a href="#box">#box</a>Referenced in: <ul> <li><a href="#ref-for-box">1. Introduction</a> <a href="#ref-for-box①">(2)</a> <a href="#ref-for-box②">(3)</a> <a href="#ref-for-box③">(4)</a> <a href="#ref-for-box④">(5)</a> <a href="#ref-for-box⑤">(6)</a> <a href="#ref-for-box⑥">(7)</a> <a href="#ref-for-box⑦">(8)</a> <a href="#ref-for-box⑧">(9)</a> <li><a href="#ref-for-box⑨">2.5. Box Generation: the none and contents keywords</a> <a href="#ref-for-box①⓪">(2)</a> <li><a href="#ref-for-box①①"> Appendix A: Glossary</a> <a href="#ref-for-box①②">(2)</a> <a href="#ref-for-box①③">(3)</a> <a href="#ref-for-box①④">(4)</a> <a href="#ref-for-box①⑤">(5)</a> <a href="#ref-for-box①⑥">(6)</a> <a href="#ref-for-box①⑦">(7)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-css-text-sequence" class="dfn-panel" data-for="css-text-sequence" id="infopanel-for-css-text-sequence"> Info about the 'text sequence' definition.<a href="#css-text-sequence">#css-text-sequence</a>Referenced in: <ul> <li><a href="#ref-for-css-text-sequence">1. Introduction</a> <a href="#ref-for-css-text-sequence①">(2)</a> <a href="#ref-for-css-text-sequence②">(3)</a> <a href="#ref-for-css-text-sequence③">(4)</a> <a href="#ref-for-css-text-sequence④">(5)</a> <li><a href="#ref-for-css-text-sequence⑤">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-css-text-sequence⑥">2.5. Box Generation: the none and contents keywords</a> <a href="#ref-for-css-text-sequence⑦">(2)</a> <a href="#ref-for-css-text-sequence⑧">(3)</a> <li><a href="#ref-for-css-text-sequence⑨"> Appendix A: Glossary</a> <li><a href="#ref-for-css-text-sequence①⓪"> Changes Since 2020 Candidate Recommendation</a> <li><a href="#ref-for-css-text-sequence①①"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-css-parent-box" class="dfn-panel" data-for="css-parent-box" id="infopanel-for-css-parent-box"> Info about the 'parent box' definition.<a href="#css-parent-box">#css-parent-box</a>Referenced in: <ul> <li><a href="#ref-for-css-parent-box"> Changes Since 2019 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-anonymous" class="dfn-panel" data-for="anonymous" id="infopanel-for-anonymous"> Info about the 'anonymous box' definition.<a href="#anonymous">#anonymous</a>Referenced in: <ul> <li><a href="#ref-for-anonymous">1. Introduction</a> <a href="#ref-for-anonymous①">(2)</a> <a href="#ref-for-anonymous②">(3)</a> <li><a href="#ref-for-anonymous③"> Appendix C: Box Construction Guidelines for Spec Authors</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-propdef-display" class="dfn-panel" data-for="propdef-display" id="infopanel-for-propdef-display"> Info about the 'display' definition.<a href="#propdef-display">#propdef-display</a>Referenced in: <ul> <li><a href="#ref-for-propdef-display③">1. Introduction</a> <a href="#ref-for-propdef-display④">(2)</a> <a href="#ref-for-propdef-display⑤">(3)</a> <a href="#ref-for-propdef-display⑥">(4)</a> <a href="#ref-for-propdef-display⑦">(5)</a> <a href="#ref-for-propdef-display⑧">(6)</a> <li><a href="#ref-for-propdef-display⑨">1.1. Module interactions</a> <li><a href="#ref-for-propdef-display①⓪">2. Box Layout Modes: the display property</a> <a href="#ref-for-propdef-display①①">(2)</a> <a href="#ref-for-propdef-display①②">(3)</a> <a href="#ref-for-propdef-display①③">(4)</a> <a href="#ref-for-propdef-display①④">(5)</a> <a href="#ref-for-propdef-display①⑤">(6)</a> <a href="#ref-for-propdef-display①⑥">(7)</a> <a href="#ref-for-propdef-display①⑦">(8)</a> <a href="#ref-for-propdef-display①⑧">(9)</a> <a href="#ref-for-propdef-display①⑨">(10)</a> <li><a href="#ref-for-propdef-display②⓪">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-propdef-display②①">(2)</a> <a href="#ref-for-propdef-display②②">(3)</a> <li><a href="#ref-for-propdef-display②③">2.5. Box Generation: the none and contents keywords</a> <a href="#ref-for-propdef-display②④">(2)</a> <a href="#ref-for-propdef-display②⑤">(3)</a> <a href="#ref-for-propdef-display②⑥">(4)</a> <a href="#ref-for-propdef-display②⑦">(5)</a> <li><a href="#ref-for-propdef-display②⑧">2.6. Precomposed Inline-level Display Values</a> <li><a href="#ref-for-propdef-display②⑨">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-propdef-display③⓪">(2)</a> <li><a href="#ref-for-propdef-display③①">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-propdef-display③②">4. Invisibility: the visibility property</a> <a href="#ref-for-propdef-display③③">(2)</a> <a href="#ref-for-propdef-display③④">(3)</a> <a href="#ref-for-propdef-display③⑤">(4)</a> <li><a href="#ref-for-propdef-display③⑥"> Appendix A: Glossary</a> <a href="#ref-for-propdef-display③⑦">(2)</a> <a href="#ref-for-propdef-display③⑧">(3)</a> <li><a href="#ref-for-propdef-display③⑨"> Appendix B: Effects of display: contents on Unusual Elements</a> <a href="#ref-for-propdef-display④⓪">(2)</a> <li><a href="#ref-for-propdef-display④①">HTML Elements</a> <a href="#ref-for-propdef-display④②">(2)</a> <a href="#ref-for-propdef-display④③">(3)</a> <a href="#ref-for-propdef-display④④">(4)</a> <a href="#ref-for-propdef-display④⑤">(5)</a> <a href="#ref-for-propdef-display④⑥">(6)</a> <li><a href="#ref-for-propdef-display④⑦">SVG Elements</a> <a href="#ref-for-propdef-display④⑧">(2)</a> <a href="#ref-for-propdef-display④⑨">(3)</a> <a href="#ref-for-propdef-display⑤⓪">(4)</a> <a href="#ref-for-propdef-display⑤①">(5)</a> <a href="#ref-for-propdef-display⑤②">(6)</a> <a href="#ref-for-propdef-display⑤③">(7)</a> <a href="#ref-for-propdef-display⑤④">(8)</a> <li><a href="#ref-for-propdef-display⑤⑤">MathML Elements</a> <a href="#ref-for-propdef-display⑤⑥">(2)</a> <li><a href="#ref-for-propdef-display⑤⑦"> Changes Since 2020 Candidate Recommendation</a> <a href="#ref-for-propdef-display⑤⑧">(2)</a> <li><a href="#ref-for-propdef-display⑤⑨"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-propdef-display⑥⓪">(2)</a> <a href="#ref-for-propdef-display⑥①">(3)</a> <a href="#ref-for-propdef-display⑥②">(4)</a> <a href="#ref-for-propdef-display⑥③">(5)</a> <a href="#ref-for-propdef-display⑥④">(6)</a> <a href="#ref-for-propdef-display⑥⑤">(7)</a> <a href="#ref-for-propdef-display⑥⑥">(8)</a> <a href="#ref-for-propdef-display⑥⑦">(9)</a> <a href="#ref-for-propdef-display⑥⑧">(10)</a> <a href="#ref-for-propdef-display⑥⑨">(11)</a> <a href="#ref-for-propdef-display⑦⓪">(12)</a> <a href="#ref-for-propdef-display⑦①">(13)</a> <a href="#ref-for-propdef-display⑦②">(14)</a> <a href="#ref-for-propdef-display⑦③">(15)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-display-type" class="dfn-panel" data-for="display-type" id="infopanel-for-display-type"> Info about the 'display type' definition.<a href="#display-type">#display-type</a>Referenced in: <ul> <li><a href="#ref-for-display-type">1. Introduction</a> <li><a href="#ref-for-display-type①">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-display-type②">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-display-type③"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inner-display-type" class="dfn-panel" data-for="inner-display-type" id="infopanel-for-inner-display-type"> Info about the 'inner display type' definition.<a href="#inner-display-type">#inner-display-type</a>Referenced in: <ul> <li><a href="#ref-for-inner-display-type">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-inner-display-type①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-inner-display-type②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-inner-display-type③">(2)</a> <li><a href="#ref-for-inner-display-type④">2.3. Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-inner-display-type⑤">(2)</a> <li><a href="#ref-for-inner-display-type⑥">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-inner-display-type⑦">(2)</a> <a href="#ref-for-inner-display-type⑧">(3)</a> <a href="#ref-for-inner-display-type⑨">(4)</a> <li><a href="#ref-for-inner-display-type①⓪">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-inner-display-type①①">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-inner-display-type①②">(2)</a> <li><a href="#ref-for-inner-display-type①③">5. Run-In Layout</a> <li><a href="#ref-for-inner-display-type①④"> Appendix A: Glossary</a> <a href="#ref-for-inner-display-type①⑤">(2)</a> <a href="#ref-for-inner-display-type①⑥">(3)</a> <a href="#ref-for-inner-display-type①⑦">(4)</a> <li><a href="#ref-for-inner-display-type①⑧"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-inner-display-type①⑨">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-outer-display-type" class="dfn-panel" data-for="outer-display-type" id="infopanel-for-outer-display-type"> Info about the 'outer display type' definition.<a href="#outer-display-type">#outer-display-type</a>Referenced in: <ul> <li><a href="#ref-for-outer-display-type">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-outer-display-type①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <a href="#ref-for-outer-display-type②">(2)</a> <li><a href="#ref-for-outer-display-type③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-outer-display-type④">(2)</a> <a href="#ref-for-outer-display-type⑤">(3)</a> <li><a href="#ref-for-outer-display-type⑥">2.3. Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-outer-display-type⑦">(2)</a> <li><a href="#ref-for-outer-display-type⑧">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-outer-display-type⑨">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-outer-display-type①⓪">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-outer-display-type①①"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-outside" class="dfn-panel" data-for="typedef-display-outside" id="infopanel-for-typedef-display-outside"> Info about the '<display-outside>' definition.<a href="#typedef-display-outside">#typedef-display-outside</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-outside">2. Box Layout Modes: the display property</a> <a href="#ref-for-typedef-display-outside①">(2)</a> <li><a href="#ref-for-typedef-display-outside②">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <a href="#ref-for-typedef-display-outside③">(2)</a> <li><a href="#ref-for-typedef-display-outside④">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-inside" class="dfn-panel" data-for="typedef-display-inside" id="infopanel-for-typedef-display-inside"> Info about the '<display-inside>' definition.<a href="#typedef-display-inside">#typedef-display-inside</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-inside">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-typedef-display-inside①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-typedef-display-inside②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-typedef-display-inside③">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-listitem" class="dfn-panel" data-for="typedef-display-listitem" id="infopanel-for-typedef-display-listitem"> Info about the '<display-listitem>' definition.<a href="#typedef-display-listitem">#typedef-display-listitem</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-listitem">2. Box Layout Modes: the display property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-internal" class="dfn-panel" data-for="typedef-display-internal" id="infopanel-for-typedef-display-internal"> Info about the '<display-internal>' definition.<a href="#typedef-display-internal">#typedef-display-internal</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-internal">2. Box Layout Modes: the display property</a> <a href="#ref-for-typedef-display-internal①">(2)</a> <a href="#ref-for-typedef-display-internal②">(3)</a> <li><a href="#ref-for-typedef-display-internal③">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-box" class="dfn-panel" data-for="typedef-display-box" id="infopanel-for-typedef-display-box"> Info about the '<display-box>' definition.<a href="#typedef-display-box">#typedef-display-box</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-box">2. Box Layout Modes: the display property</a> <a href="#ref-for-typedef-display-box①">(2)</a> <li><a href="#ref-for-typedef-display-box②">2.5. Box Generation: the none and contents keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-typedef-display-legacy" class="dfn-panel" data-for="typedef-display-legacy" id="infopanel-for-typedef-display-legacy"> Info about the '<display-legacy>' definition.<a href="#typedef-display-legacy">#typedef-display-legacy</a>Referenced in: <ul> <li><a href="#ref-for-typedef-display-legacy">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-typedef-display-legacy①">2.6. Precomposed Inline-level Display Values</a> <li><a href="#ref-for-typedef-display-legacy②"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inline-block" class="dfn-panel" data-for="inline-block" id="infopanel-for-inline-block"> Info about the 'inline block' definition.<a href="#inline-block">#inline-block</a>Referenced in: <ul> <li><a href="#ref-for-inline-block">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-inline-block①"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-block" class="dfn-panel" data-for="valdef-display-block" id="infopanel-for-valdef-display-block"> Info about the 'block' definition.<a href="#valdef-display-block">#valdef-display-block</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-block">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-block①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-valdef-display-block②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-block③">2.3. Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-valdef-display-block④">(2)</a> <li><a href="#ref-for-valdef-display-block⑤">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-valdef-display-block⑥">(2)</a> <a href="#ref-for-valdef-display-block⑦">(3)</a> <li><a href="#ref-for-valdef-display-block⑧">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-valdef-display-block⑨"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-level-box" class="dfn-panel" data-for="block-level-box" id="infopanel-for-block-level-box"> Info about the 'block-level' definition.<a href="#block-level-box">#block-level-box</a>Referenced in: <ul> <li><a href="#ref-for-block-level-box"> Appendix A: Glossary</a> <a href="#ref-for-block-level-box①">(2)</a> <a href="#ref-for-block-level-box②">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-inline" class="dfn-panel" data-for="valdef-display-inline" id="infopanel-for-valdef-display-inline"> Info about the 'inline' definition.<a href="#valdef-display-inline">#valdef-display-inline</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-inline">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-inline①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-valdef-display-inline②">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-inline③">(2)</a> <li><a href="#ref-for-valdef-display-inline④">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-valdef-display-inline⑤">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-valdef-display-inline⑥">(2)</a> <li><a href="#ref-for-valdef-display-inline⑦">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-valdef-display-inline⑧"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inline-level-box" class="dfn-panel" data-for="inline-level-box" id="infopanel-for-inline-level-box"> Info about the 'inline-level' definition.<a href="#inline-level-box">#inline-level-box</a>Referenced in: <ul> <li><a href="#ref-for-inline-level-box">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-inline-level-box①">5. Run-In Layout</a> <li><a href="#ref-for-inline-level-box②"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-run-in" class="dfn-panel" data-for="valdef-display-run-in" id="infopanel-for-valdef-display-run-in"> Info about the 'run-in' definition.<a href="#valdef-display-run-in">#valdef-display-run-in</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-run-in">1. Introduction</a> <li><a href="#ref-for-valdef-display-run-in①">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-run-in②">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-valdef-display-run-in③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-run-in④">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-valdef-display-run-in⑤"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-flow" class="dfn-panel" data-for="valdef-display-flow" id="infopanel-for-valdef-display-flow"> Info about the 'flow' definition.<a href="#valdef-display-flow">#valdef-display-flow</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-flow">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-valdef-display-flow①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-flow②">2.3. Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-valdef-display-flow③">(2)</a> <li><a href="#ref-for-valdef-display-flow④">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-valdef-display-flow⑤">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-valdef-display-flow⑥">5. Run-In Layout</a> <li><a href="#ref-for-valdef-display-flow⑦"> Appendix A: Glossary</a> <a href="#ref-for-valdef-display-flow⑧">(2)</a> <li><a href="#ref-for-valdef-display-flow⑨"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-flow-layout" class="dfn-panel" data-for="flow-layout" id="infopanel-for-flow-layout"> Info about the 'flow layout' definition.<a href="#flow-layout">#flow-layout</a>Referenced in: <ul> <li><a href="#ref-for-flow-layout">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-flow-layout①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <a href="#ref-for-flow-layout②">(2)</a> <a href="#ref-for-flow-layout③">(3)</a> <li><a href="#ref-for-flow-layout④">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-flow-layout⑤">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-flow-layout⑥"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-flow-root" class="dfn-panel" data-for="valdef-display-flow-root" id="infopanel-for-valdef-display-flow-root"> Info about the 'flow-root' definition.<a href="#valdef-display-flow-root">#valdef-display-flow-root</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-flow-root">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-flow-root①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-flow-root②">(2)</a> <li><a href="#ref-for-valdef-display-flow-root③">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-valdef-display-flow-root④">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-valdef-display-flow-root⑤">(2)</a> <li><a href="#ref-for-valdef-display-flow-root⑥">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-valdef-display-flow-root⑦">(2)</a> <li><a href="#ref-for-valdef-display-flow-root⑧"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-valdef-display-flow-root⑨">(2)</a> <a href="#ref-for-valdef-display-flow-root①⓪">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-table" class="dfn-panel" data-for="valdef-display-table" id="infopanel-for-valdef-display-table"> Info about the 'table' definition.<a href="#valdef-display-table">#valdef-display-table</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-table">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-table①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-table②">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-valdef-display-table③"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-flex" class="dfn-panel" data-for="valdef-display-flex" id="infopanel-for-valdef-display-flex"> Info about the 'flex' definition.<a href="#valdef-display-flex">#valdef-display-flex</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-flex">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-flex①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-flex②">2.7. Automatic Box Type Transformations</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-grid" class="dfn-panel" data-for="valdef-display-grid" id="infopanel-for-valdef-display-grid"> Info about the 'grid' definition.<a href="#valdef-display-grid">#valdef-display-grid</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-grid">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-grid①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-valdef-display-grid②">2.7. Automatic Box Type Transformations</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-ruby" class="dfn-panel" data-for="valdef-display-ruby" id="infopanel-for-valdef-display-ruby"> Info about the 'ruby' definition.<a href="#valdef-display-ruby">#valdef-display-ruby</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-ruby">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-ruby①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-ruby②">(2)</a> <li><a href="#ref-for-valdef-display-ruby③">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-list-item" class="dfn-panel" data-for="valdef-display-list-item" id="infopanel-for-valdef-display-list-item"> Info about the 'list-item' definition.<a href="#valdef-display-list-item">#valdef-display-list-item</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-list-item">2. Box Layout Modes: the display property</a> <a href="#ref-for-valdef-display-list-item①">(2)</a> <a href="#ref-for-valdef-display-list-item②">(3)</a> <li><a href="#ref-for-valdef-display-list-item③">2.3. Generating Marker Boxes: the list-item keyword</a> <li><a href="#ref-for-valdef-display-list-item④"> Appendix A: Glossary</a> <li><a href="#ref-for-valdef-display-list-item⑤"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-layout-internal" class="dfn-panel" data-for="layout-internal" id="infopanel-for-layout-internal"> Info about the 'layout-internal' definition.<a href="#layout-internal">#layout-internal</a>Referenced in: <ul> <li><a href="#ref-for-layout-internal">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-layout-internal①">(2)</a> <a href="#ref-for-layout-internal②">(3)</a> <li><a href="#ref-for-layout-internal③">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-layout-internal④">(2)</a> <li><a href="#ref-for-layout-internal⑤"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-table-row" class="dfn-panel" data-for="valdef-display-table-row" id="infopanel-for-valdef-display-table-row"> Info about the 'table-row' definition.<a href="#valdef-display-table-row">#valdef-display-table-row</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-table-row">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-table-cell" class="dfn-panel" data-for="valdef-display-table-cell" id="infopanel-for-valdef-display-table-cell"> Info about the 'table-cell' definition.<a href="#valdef-display-table-cell">#valdef-display-table-cell</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-table-cell">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-valdef-display-table-cell①">(2)</a> <li><a href="#ref-for-valdef-display-table-cell②"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-internal-table-element" class="dfn-panel" data-for="internal-table-element" id="infopanel-for-internal-table-element"> Info about the 'internal table element' definition.<a href="#internal-table-element">#internal-table-element</a>Referenced in: <ul> <li><a href="#ref-for-internal-table-element">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-table-caption" class="dfn-panel" data-for="valdef-display-table-caption" id="infopanel-for-valdef-display-table-caption"> Info about the 'table-caption' definition.<a href="#valdef-display-table-caption">#valdef-display-table-caption</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-table-caption">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-valdef-display-table-caption①"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-ruby-base" class="dfn-panel" data-for="valdef-display-ruby-base" id="infopanel-for-valdef-display-ruby-base"> Info about the 'ruby-base' definition.<a href="#valdef-display-ruby-base">#valdef-display-ruby-base</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-ruby-base">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-ruby-text" class="dfn-panel" data-for="valdef-display-ruby-text" id="infopanel-for-valdef-display-ruby-text"> Info about the 'ruby-text' definition.<a href="#valdef-display-ruby-text">#valdef-display-ruby-text</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-ruby-text">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-contents" class="dfn-panel" data-for="valdef-display-contents" id="infopanel-for-valdef-display-contents"> Info about the 'contents' definition.<a href="#valdef-display-contents">#valdef-display-contents</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-contents">1. Introduction</a> <li><a href="#ref-for-valdef-display-contents①">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-contents②">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-valdef-display-contents③">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-valdef-display-contents④">2.8. The Root Element’s Principal Box</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-none" class="dfn-panel" data-for="valdef-display-none" id="infopanel-for-valdef-display-none"> Info about the 'none' definition.<a href="#valdef-display-none">#valdef-display-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-none">1. Introduction</a> <li><a href="#ref-for-valdef-display-none①">2. Box Layout Modes: the display property</a> <a href="#ref-for-valdef-display-none②">(2)</a> <a href="#ref-for-valdef-display-none③">(3)</a> <li><a href="#ref-for-valdef-display-none④">2.5. Box Generation: the none and contents keywords</a> <li><a href="#ref-for-valdef-display-none⑤">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-valdef-display-none⑥">4. Invisibility: the visibility property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-inline-block" class="dfn-panel" data-for="valdef-display-inline-block" id="infopanel-for-valdef-display-inline-block"> Info about the 'inline-block' definition.<a href="#valdef-display-inline-block">#valdef-display-inline-block</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-inline-block">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-inline-block①"> Appendix A: Glossary</a> <li><a href="#ref-for-valdef-display-inline-block②"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-inline-table" class="dfn-panel" data-for="valdef-display-inline-table" id="infopanel-for-valdef-display-inline-table"> Info about the 'inline-table' definition.<a href="#valdef-display-inline-table">#valdef-display-inline-table</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-inline-table">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-valdef-display-inline-table①"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-inline-flex" class="dfn-panel" data-for="valdef-display-inline-flex" id="infopanel-for-valdef-display-inline-flex"> Info about the 'inline-flex' definition.<a href="#valdef-display-inline-flex">#valdef-display-inline-flex</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-inline-flex">2. Box Layout Modes: the display property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-display-inline-grid" class="dfn-panel" data-for="valdef-display-inline-grid" id="infopanel-for-valdef-display-inline-grid"> Info about the 'inline-grid' definition.<a href="#valdef-display-inline-grid">#valdef-display-inline-grid</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-inline-grid">2. Box Layout Modes: the display property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-blockify" class="dfn-panel" data-for="blockify" id="infopanel-for-blockify"> Info about the 'blockification' definition.<a href="#blockify">#blockify</a>Referenced in: <ul> <li><a href="#ref-for-blockify">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-blockify①">(2)</a> <a href="#ref-for-blockify②">(3)</a> <a href="#ref-for-blockify③">(4)</a> <a href="#ref-for-blockify④">(5)</a> <a href="#ref-for-blockify⑤">(6)</a> <li><a href="#ref-for-blockify⑥">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-blockify⑦"> Appendix A: Glossary</a> <li><a href="#ref-for-blockify⑧"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-blockify⑨">(2)</a> <a href="#ref-for-blockify①⓪">(3)</a> <a href="#ref-for-blockify①①">(4)</a> <li><a href="#ref-for-blockify①②"> Changes Since 2020 Candidate Recommendation</a> <a href="#ref-for-blockify①③">(2)</a> <li><a href="#ref-for-blockify①④"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-blockify①⑤">(2)</a> <a href="#ref-for-blockify①⑥">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inlinify" class="dfn-panel" data-for="inlinify" id="infopanel-for-inlinify"> Info about the 'inlinification' definition.<a href="#inlinify">#inlinify</a>Referenced in: <ul> <li><a href="#ref-for-inlinify">2.7. Automatic Box Type Transformations</a> <a href="#ref-for-inlinify①">(2)</a> <a href="#ref-for-inlinify②">(3)</a> <a href="#ref-for-inlinify③">(4)</a> <a href="#ref-for-inlinify④">(5)</a> <a href="#ref-for-inlinify⑤">(6)</a> <li><a href="#ref-for-inlinify⑥">5. Run-In Layout</a> <li><a href="#ref-for-inlinify⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-inlinify⑧">(2)</a> <li><a href="#ref-for-inlinify⑨"> Changes Since 2020 Candidate Recommendation</a> <a href="#ref-for-inlinify①⓪">(2)</a> <li><a href="#ref-for-inlinify①①"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-inlinify①②">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-propdef-order" class="dfn-panel" data-for="propdef-order" id="infopanel-for-propdef-order"> Info about the 'order' definition.<a href="#propdef-order">#propdef-order</a>Referenced in: <ul> <li><a href="#ref-for-propdef-order">3. Display Order: the order property</a> <a href="#ref-for-propdef-order①">(2)</a> <a href="#ref-for-propdef-order②">(3)</a> <a href="#ref-for-propdef-order③">(4)</a> <a href="#ref-for-propdef-order④">(5)</a> <li><a href="#ref-for-propdef-order⑤">3.1. Reordering and Accessibility</a> <a href="#ref-for-propdef-order⑥">(2)</a> <a href="#ref-for-propdef-order⑦">(3)</a> <a href="#ref-for-propdef-order⑧">(4)</a> <a href="#ref-for-propdef-order⑨">(5)</a> <a href="#ref-for-propdef-order①⓪">(6)</a> <a href="#ref-for-propdef-order①①">(7)</a> <a href="#ref-for-propdef-order①②">(8)</a> <a href="#ref-for-propdef-order①③">(9)</a> <a href="#ref-for-propdef-order①④">(10)</a> <a href="#ref-for-propdef-order①⑤">(11)</a> <li><a href="#ref-for-propdef-order①⑥"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-propdef-visibility" class="dfn-panel" data-for="propdef-visibility" id="infopanel-for-propdef-visibility"> Info about the 'visibility' definition.<a href="#propdef-visibility">#propdef-visibility</a>Referenced in: <ul> <li><a href="#ref-for-propdef-visibility">4. Invisibility: the visibility property</a> <a href="#ref-for-propdef-visibility①">(2)</a> <a href="#ref-for-propdef-visibility②">(3)</a> <a href="#ref-for-propdef-visibility③">(4)</a> <a href="#ref-for-propdef-visibility④">(5)</a> <li><a href="#ref-for-propdef-visibility⑤"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-visibility-visible" class="dfn-panel" data-for="valdef-visibility-visible" id="infopanel-for-valdef-visibility-visible"> Info about the 'visible' definition.<a href="#valdef-visibility-visible">#valdef-visibility-visible</a>Referenced in: <ul> <li><a href="#ref-for-valdef-visibility-visible">4. Invisibility: the visibility property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-valdef-visibility-hidden" class="dfn-panel" data-for="valdef-visibility-hidden" id="infopanel-for-valdef-visibility-hidden"> Info about the 'hidden' definition.<a href="#valdef-visibility-hidden">#valdef-visibility-hidden</a>Referenced in: <ul> <li><a href="#ref-for-valdef-visibility-hidden">4. Invisibility: the visibility property</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-invisible" class="dfn-panel" data-for="invisible" id="infopanel-for-invisible"> Info about the 'Invisible' definition.<a href="#invisible">#invisible</a>Referenced in: <ul> <li><a href="#ref-for-invisible">4. Invisibility: the visibility property</a> <a href="#ref-for-invisible①">(2)</a> <a href="#ref-for-invisible②">(3)</a> <a href="#ref-for-invisible③">(4)</a> <a href="#ref-for-invisible④">(5)</a> <a href="#ref-for-invisible⑤">(6)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-run-in" class="dfn-panel" data-for="run-in" id="infopanel-for-run-in"> Info about the 'run-in box' definition.<a href="#run-in">#run-in</a>Referenced in: <ul> <li><a href="#ref-for-run-in">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-run-in①">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-run-in②">5. Run-In Layout</a> <a href="#ref-for-run-in③">(2)</a> <a href="#ref-for-run-in④">(3)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-run-in-sequence" class="dfn-panel" data-for="run-in-sequence" id="infopanel-for-run-in-sequence"> Info about the 'run-in sequence' definition.<a href="#run-in-sequence">#run-in-sequence</a>Referenced in: <ul> <li><a href="#ref-for-run-in-sequence">5. Run-In Layout</a> <a href="#ref-for-run-in-sequence①">(2)</a> <a href="#ref-for-run-in-sequence②">(3)</a> <a href="#ref-for-run-in-sequence③">(4)</a> <a href="#ref-for-run-in-sequence④">(5)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-root-element" class="dfn-panel" data-for="root-element" id="infopanel-for-root-element"> Info about the 'root element' definition.<a href="#root-element">#root-element</a>Referenced in: <ul> <li><a href="#ref-for-root-element">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-root-element①"> Appendix A: Glossary</a> <li><a href="#ref-for-root-element②"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-principal-box" class="dfn-panel" data-for="principal-box" id="infopanel-for-principal-box"> Info about the 'principal box' definition.<a href="#principal-box">#principal-box</a>Referenced in: <ul> <li><a href="#ref-for-principal-box">1. Introduction</a> <a href="#ref-for-principal-box①">(2)</a> <a href="#ref-for-principal-box②">(3)</a> <a href="#ref-for-principal-box③">(4)</a> <a href="#ref-for-principal-box④">(5)</a> <a href="#ref-for-principal-box⑤">(6)</a> <li><a href="#ref-for-principal-box⑥">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-principal-box⑦">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-principal-box⑧">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-principal-box⑨"> Appendix A: Glossary</a> <a href="#ref-for-principal-box①⓪">(2)</a> <li><a href="#ref-for-principal-box①①">HTML Elements</a> <li><a href="#ref-for-principal-box①②"> Appendix C: Box Construction Guidelines for Spec Authors</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inline-level" class="dfn-panel" data-for="inline-level" id="infopanel-for-inline-level"> Info about the 'inline-level' definition.<a href="#inline-level">#inline-level</a>Referenced in: <ul> <li><a href="#ref-for-inline-level">2. Box Layout Modes: the display property</a> <a href="#ref-for-inline-level①">(2)</a> <a href="#ref-for-inline-level②">(3)</a> <a href="#ref-for-inline-level③">(4)</a> <a href="#ref-for-inline-level④">(5)</a> <li><a href="#ref-for-inline-level⑤"> Appendix A: Glossary</a> <a href="#ref-for-inline-level⑥">(2)</a> <li><a href="#ref-for-inline-level⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-inline-level⑧">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-level" class="dfn-panel" data-for="block-level" id="infopanel-for-block-level"> Info about the 'block-level' definition.<a href="#block-level">#block-level</a>Referenced in: <ul> <li><a href="#ref-for-block-level">2. Box Layout Modes: the display property</a> <a href="#ref-for-block-level①">(2)</a> <a href="#ref-for-block-level②">(3)</a> <a href="#ref-for-block-level③">(4)</a> <a href="#ref-for-block-level④">(5)</a> <li><a href="#ref-for-block-level⑤"> Appendix A: Glossary</a> <a href="#ref-for-block-level⑥">(2)</a> <li><a href="#ref-for-block-level⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a> <li><a href="#ref-for-block-level⑧"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inline-box" class="dfn-panel" data-for="inline-box" id="infopanel-for-inline-box"> Info about the 'inline box' definition.<a href="#inline-box">#inline-box</a>Referenced in: <ul> <li><a href="#ref-for-inline-box">1. Introduction</a> <li><a href="#ref-for-inline-box①">2. Box Layout Modes: the display property</a> <a href="#ref-for-inline-box②">(2)</a> <a href="#ref-for-inline-box③">(3)</a> <li><a href="#ref-for-inline-box④">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-inline-box⑤">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-inline-box⑥"> Appendix A: Glossary</a> <a href="#ref-for-inline-box⑦">(2)</a> <a href="#ref-for-inline-box⑧">(3)</a> <a href="#ref-for-inline-box⑨">(4)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-container" class="dfn-panel" data-for="block-container" id="infopanel-for-block-container"> Info about the 'block container' definition.<a href="#block-container">#block-container</a>Referenced in: <ul> <li><a href="#ref-for-block-container">2. Box Layout Modes: the display property</a> <a href="#ref-for-block-container①">(2)</a> <a href="#ref-for-block-container②">(3)</a> <li><a href="#ref-for-block-container③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-block-container④">(2)</a> <a href="#ref-for-block-container⑤">(3)</a> <li><a href="#ref-for-block-container⑥">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-block-container⑦"> Appendix A: Glossary</a> <a href="#ref-for-block-container⑧">(2)</a> <a href="#ref-for-block-container⑨">(3)</a> <a href="#ref-for-block-container①⓪">(4)</a> <a href="#ref-for-block-container①①">(5)</a> <a href="#ref-for-block-container①②">(6)</a> <a href="#ref-for-block-container①③">(7)</a> <a href="#ref-for-block-container①④">(8)</a> <a href="#ref-for-block-container①⑤">(9)</a> <li><a href="#ref-for-block-container①⑥"> Appendix C: Box Construction Guidelines for Spec Authors</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-box" class="dfn-panel" data-for="block-box" id="infopanel-for-block-box"> Info about the 'block box' definition.<a href="#block-box">#block-box</a>Referenced in: <ul> <li><a href="#ref-for-block-box">1. Introduction</a> <li><a href="#ref-for-block-box①">2. Box Layout Modes: the display property</a> <a href="#ref-for-block-box②">(2)</a> <a href="#ref-for-block-box③">(3)</a> <li><a href="#ref-for-block-box④">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <li><a href="#ref-for-block-box⑤">2.7. Automatic Box Type Transformations</a> <li><a href="#ref-for-block-box⑥"> Appendix A: Glossary</a> <a href="#ref-for-block-box⑦">(2)</a> <a href="#ref-for-block-box⑧">(3)</a> <li><a href="#ref-for-block-box⑨"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block" class="dfn-panel" data-for="block" id="infopanel-for-block"> Info about the 'block' definition.<a href="#block">#block</a>Referenced in: <ul> <li><a href="#ref-for-block"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-replaced-element" class="dfn-panel" data-for="replaced-element" id="infopanel-for-replaced-element"> Info about the 'replaced element' definition.<a href="#replaced-element">#replaced-element</a>Referenced in: <ul> <li><a href="#ref-for-replaced-element">2. Box Layout Modes: the display property</a> <a href="#ref-for-replaced-element①">(2)</a> <li><a href="#ref-for-replaced-element②">2.1. Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <li><a href="#ref-for-replaced-element③">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-replaced-element④">2.4. Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-replaced-element⑤">(2)</a> <li><a href="#ref-for-replaced-element⑥"> Appendix A: Glossary</a> <a href="#ref-for-replaced-element⑦">(2)</a> <li><a href="#ref-for-replaced-element⑧"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-containing-block" class="dfn-panel" data-for="containing-block" id="infopanel-for-containing-block"> Info about the 'containing block' definition.<a href="#containing-block">#containing-block</a>Referenced in: <ul> <li><a href="#ref-for-containing-block">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-containing-block①"> Appendix A: Glossary</a> <a href="#ref-for-containing-block②">(2)</a> <a href="#ref-for-containing-block③">(3)</a> <a href="#ref-for-containing-block④">(4)</a> <a href="#ref-for-containing-block⑤">(5)</a> <a href="#ref-for-containing-block⑥">(6)</a> <a href="#ref-for-containing-block⑦">(7)</a> <a href="#ref-for-containing-block⑧">(8)</a> <a href="#ref-for-containing-block⑨">(9)</a> <a href="#ref-for-containing-block①⓪">(10)</a> <a href="#ref-for-containing-block①①">(11)</a> <li><a href="#ref-for-containing-block①②"> Changes Since 2019 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-initial-containing-block" class="dfn-panel" data-for="initial-containing-block" id="infopanel-for-initial-containing-block"> Info about the 'initial containing block' definition.<a href="#initial-containing-block">#initial-containing-block</a>Referenced in: <ul> <li><a href="#ref-for-initial-containing-block">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-initial-containing-block①"> Appendix A: Glossary</a> <a href="#ref-for-initial-containing-block②">(2)</a> <a href="#ref-for-initial-containing-block③">(3)</a> <li><a href="#ref-for-initial-containing-block④"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-formatting-context" class="dfn-panel" data-for="formatting-context" id="infopanel-for-formatting-context"> Info about the 'formatting context' definition.<a href="#formatting-context">#formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-formatting-context">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-formatting-context①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-formatting-context②">(2)</a> <a href="#ref-for-formatting-context③">(3)</a> <li><a href="#ref-for-formatting-context④">3. Display Order: the order property</a> <li><a href="#ref-for-formatting-context⑤"> Appendix A: Glossary</a> <a href="#ref-for-formatting-context⑥">(2)</a> <a href="#ref-for-formatting-context⑦">(3)</a> <a href="#ref-for-formatting-context⑧">(4)</a> <a href="#ref-for-formatting-context⑨">(5)</a> <a href="#ref-for-formatting-context①⓪">(6)</a> <a href="#ref-for-formatting-context①①">(7)</a> <a href="#ref-for-formatting-context①②">(8)</a> <a href="#ref-for-formatting-context①③">(9)</a> <a href="#ref-for-formatting-context①④">(10)</a> <a href="#ref-for-formatting-context①⑤">(11)</a> <a href="#ref-for-formatting-context①⑥">(12)</a> <li><a href="#ref-for-formatting-context①⑦"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-independent-formatting-context" class="dfn-panel" data-for="independent-formatting-context" id="infopanel-for-independent-formatting-context"> Info about the 'independent formatting context' definition.<a href="#independent-formatting-context">#independent-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-independent-formatting-context">2.8. The Root Element’s Principal Box</a> <li><a href="#ref-for-independent-formatting-context①"> Appendix A: Glossary</a> <a href="#ref-for-independent-formatting-context②">(2)</a> <a href="#ref-for-independent-formatting-context③">(3)</a> <a href="#ref-for-independent-formatting-context④">(4)</a> <a href="#ref-for-independent-formatting-context⑤">(5)</a> <li><a href="#ref-for-independent-formatting-context⑥"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-independent-formatting-context⑦">(2)</a> <li><a href="#ref-for-independent-formatting-context⑧"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-independent-formatting-context⑨">(2)</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-establish-an-independent-formatting-context" class="dfn-panel" data-for="establish-an-independent-formatting-context" id="infopanel-for-establish-an-independent-formatting-context"> Info about the ' establish an independent formatting context' definition.<a href="#establish-an-independent-formatting-context">#establish-an-independent-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-establish-an-independent-formatting-context"> Appendix A: Glossary</a> <a href="#ref-for-establish-an-independent-formatting-context①">(2)</a> <a href="#ref-for-establish-an-independent-formatting-context②">(3)</a> <a href="#ref-for-establish-an-independent-formatting-context③">(4)</a> <a href="#ref-for-establish-an-independent-formatting-context④">(5)</a> <li><a href="#ref-for-establish-an-independent-formatting-context⑤"> Appendix C: Box Construction Guidelines for Spec Authors</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-formatting-context" class="dfn-panel" data-for="block-formatting-context" id="infopanel-for-block-formatting-context"> Info about the 'block formatting context' definition.<a href="#block-formatting-context">#block-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-block-formatting-context">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-block-formatting-context①">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-block-formatting-context②">(2)</a> <a href="#ref-for-block-formatting-context③">(3)</a> <a href="#ref-for-block-formatting-context④">(4)</a> <a href="#ref-for-block-formatting-context⑤">(5)</a> <li><a href="#ref-for-block-formatting-context⑥">5. Run-In Layout</a> <li><a href="#ref-for-block-formatting-context⑦"> Appendix A: Glossary</a> <a href="#ref-for-block-formatting-context⑧">(2)</a> <a href="#ref-for-block-formatting-context⑨">(3)</a> <a href="#ref-for-block-formatting-context①⓪">(4)</a> <a href="#ref-for-block-formatting-context①①">(5)</a> <a href="#ref-for-block-formatting-context①②">(6)</a> <a href="#ref-for-block-formatting-context①③">(7)</a> <a href="#ref-for-block-formatting-context①④">(8)</a> <a href="#ref-for-block-formatting-context①⑤">(9)</a> <a href="#ref-for-block-formatting-context①⑥">(10)</a> <a href="#ref-for-block-formatting-context①⑦">(11)</a> <a href="#ref-for-block-formatting-context①⑧">(12)</a> <a href="#ref-for-block-formatting-context①⑨">(13)</a> <a href="#ref-for-block-formatting-context②⓪">(14)</a> <a href="#ref-for-block-formatting-context②①">(15)</a> <a href="#ref-for-block-formatting-context②②">(16)</a> <a href="#ref-for-block-formatting-context②③">(17)</a> <a href="#ref-for-block-formatting-context②④">(18)</a> <a href="#ref-for-block-formatting-context②⑤">(19)</a> <li><a href="#ref-for-block-formatting-context②⑥"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-inline-formatting-context" class="dfn-panel" data-for="inline-formatting-context" id="infopanel-for-inline-formatting-context"> Info about the 'inline formatting context' definition.<a href="#inline-formatting-context">#inline-formatting-context</a>Referenced in: <ul> <li><a href="#ref-for-inline-formatting-context">2.2. Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <li><a href="#ref-for-inline-formatting-context①"> Appendix A: Glossary</a> <a href="#ref-for-inline-formatting-context②">(2)</a> <a href="#ref-for-inline-formatting-context③">(3)</a> <a href="#ref-for-inline-formatting-context④">(4)</a> <a href="#ref-for-inline-formatting-context⑤">(5)</a> <a href="#ref-for-inline-formatting-context⑥">(6)</a> <a href="#ref-for-inline-formatting-context⑦">(7)</a> <a href="#ref-for-inline-formatting-context⑧">(8)</a> <li><a href="#ref-for-inline-formatting-context⑨"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-layout" class="dfn-panel" data-for="block-layout" id="infopanel-for-block-layout"> Info about the 'block layout' definition.<a href="#block-layout">#block-layout</a>Referenced in: <ul> <li><a href="#ref-for-block-layout"> Appendix A: Glossary</a> <li><a href="#ref-for-block-layout①"> Changes Since 2020 Candidate Recommendation</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-block-formatting-context-root" class="dfn-panel" data-for="block-formatting-context-root" id="infopanel-for-block-formatting-context-root"> Info about the 'block formatting context root' definition.<a href="#block-formatting-context-root">#block-formatting-context-root</a>Referenced in: <ul> <li><a href="#ref-for-block-formatting-context-root"> Appendix A: Glossary</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-bfc" class="dfn-panel" data-for="bfc" id="infopanel-for-bfc"> Info about the 'BFC' definition.<a href="#bfc">#bfc</a>Referenced in: <ul> <li><a href="#ref-for-bfc">2. Box Layout Modes: the display property</a> <li><a href="#ref-for-bfc①"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-out-of-flow" class="dfn-panel" data-for="out-of-flow" id="infopanel-for-out-of-flow"> Info about the 'out-of-flow' definition.<a href="#out-of-flow">#out-of-flow</a>Referenced in: <ul> <li><a href="#ref-for-out-of-flow"> Appendix A: Glossary</a> <a href="#ref-for-out-of-flow①">(2)</a> <a href="#ref-for-out-of-flow②">(3)</a> <a href="#ref-for-out-of-flow③">(4)</a> <li><a href="#ref-for-out-of-flow④"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-in-flow" class="dfn-panel" data-for="in-flow" id="infopanel-for-in-flow"> Info about the 'in-flow' definition.<a href="#in-flow">#in-flow</a>Referenced in: <ul> <li><a href="#ref-for-in-flow"> Appendix A: Glossary</a> <li><a href="#ref-for-in-flow①"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <aside aria-labelledby="infopaneltitle-for-document-order" class="dfn-panel" data-for="document-order" id="infopanel-for-document-order"> Info about the 'document order' definition.<a href="#document-order">#document-order</a>Referenced in: <ul> <li><a href="#ref-for-document-order"> Changes Prior to Candidate Recommendation Status</a> </ul> </aside> <script>/* script-dfn-panel */ "use strict"; { function queryAll(sel) { return [].slice.call(document.querySelectorAll(sel)); } // Add popup behavior to all dfns to show the corresponding dfn-panel. var dfns = document.querySelectorAll('.dfn-paneled'); for (let dfn of dfns) { insertDfnPopupAction(dfn); } document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); function hideAllDfnPanels() { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el)); } function showDfnPanel(dfnPanel, dfn) { hideAllDfnPanels(); // Only display one at this time. dfn.setAttribute("aria-expanded", "true"); dfnPanel.classList.add("on"); dfnPanel.style.left = "5px"; dfnPanel.style.top = "0px"; const panelRect = dfnPanel.getBoundingClientRect(); const panelWidth = panelRect.right - panelRect.left; if (panelRect.right > document.body.scrollWidth) { // Panel's overflowing the screen. // Just drop it below the dfn and flip it rightward instead. // This still wont' fix things if the screen is *really* wide, // but fixing that's a lot harder without 'anchor()'. dfnPanel.style.top = "1.5em"; dfnPanel.style.left = "auto"; dfnPanel.style.right = "0px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel(dfnPanel, dfn) { if(!dfn) { dfn = document.getElementById(dfnPanel.getAttribute("data-for")); } dfn.setAttribute("aria-expanded", "false") dfnPanel.classList.remove("on"); dfnPanel.classList.remove("activated"); } function toggleDfnPanel(dfnPanel, dfn) { if(dfnPanel.classList.contains("on")) { hideDfnPanel(dfnPanel, dfn); } else { showDfnPanel(dfnPanel, dfn); } } function insertDfnPopupAction(dfn) { // Find dfn panel const dfnPanel = document.querySelector(`.dfn-panel[data-for='${dfn.id}']`); if (dfnPanel) { const panelWrapper = document.createElement('span'); panelWrapper.appendChild(dfnPanel); panelWrapper.style.position = "relative"; panelWrapper.style.height = "0px"; dfn.insertAdjacentElement("afterend", panelWrapper); dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { showDfnPanel(dfnPanel, dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.addEventListener('click', (event) => { pinDfnPanel(dfnPanel); event.stopPropagation(); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }) } else { console.log("Couldn't find .dfn-panel[data-for='" + dfn.id + "']"); } } } </script>