CSS Display Module Level 3

inline-block

Behaves as ''inline flow-root''.

inline-table

Behaves as ''inline table''.

inline-flex

Behaves as ''inline flex''.

inline-grid

Behaves as ''inline grid''.

Automatic Box Type Transformations

Toggling Box Generation: the 'box-suppress' property

	Name: box-suppress
	Value: show | discard | hide
	Initial: show
	Applies to: all elements
	Inherited: no
	Percentages: n/a
	Computed value: see prose
	Media: all
	

show

The element generates boxes as normal, per its 'display-*' properties.

discard

The element generates no boxes at all.

hide

The element generates boxes as normal, but those boxes do not participate in layout in any way, and must not be displayed. For the purpose of any layout-related information, such as querying for the computed value of the element's 'width' property, it must be treated as if it did not generate any boxes. Properties that rely on boxes but do not rely on layout, such as animations, 'counter-increment', etc., must work as normal on this element and its descendants. Issue: This needs more clarity about what "layout-related" and "participates in layout" means. Does the box still generate anonymous boxes, etc.? How does it affect speech? See proposal.

Run-In Layout

		<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>
		

		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.
		

• If a run-in sequence is immediately followed by a block box that does not establish a new formatting context, it is inserted as direct children of the block box after its ''::marker'' pseudo-element's boxes (if any), but preceding any other boxes generates by the contents of the block (including the box generated by the ''::before'' pseudo-element, if any). 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.
• Otherwise, 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).
• A run-in box with ''display: flow'' inlinifies its contents.

Appendix A: Glossary

inline-level

Content that participates in inline layout. Specifically, inline-level boxes and text.

block-level

Content that participates in block layout. Specifically, block-level boxes.

inline

A non-replaced inline-level box whose inner display type is ''flow''. The contents of an inline box participate in the same inline formatting context as the inline box itself.

atomic inline

An inline-level box that is replaced or that establishes a new formatting context. (An inline-level box whose inner display type is not ''flow'' establishes a new formatting context of the specified inner display type.)

block container

A box whose contents participate in a block formatting context. A block container does not necessarily establish a new block formatting context if its parent formatting context is also a block formatting context.

block box

A block-level box that is also a block container.

block

Used as a shorthand for block box, block-level box, or block container box, where unambiguous.

containing block

A rectangle that forms the basis of sizing and positioning for the boxes associated with it (usually the children of the box that generated it). Notably, a containing block is not a box (it is a rectangle), however it is often derived from the dimensions of a box. If properties of a containing block are referenced, they reference the values on the box that generated the containing block. (For the initial containing block, the values are taken from the root element.) See [[CSS2]] Section 9.1.2 and Section 10.1 for details.

initial containing block

The containing block of the root element. See CSS2.1§10.1 for continuous media; and [[!CSS3PAGE]] for paged media.

formatting context

A formatting context 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 flex formatting context lays out boxes according to the flex layout rules [[CSS3-FLEXBOX]], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [[CSS2]]. When a box establishes a new formatting context (whether that formatting context 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 the rules and contents of the formatting context outside the box, and vice versa.

For example, in a block formatting context, floated boxes affect the layout of surrounding boxes. But their effects do not escape their formatting context: 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.

As another example, margins do not collapse across formatting context boundaries.

Exclusions are able to affect content across formatting context boundaries. (At time of writing, they are the layout feature that can.) [[CSS3-EXCLUSIONS]]

block formatting context

inline formatting context

Block and inline formatting contexts are defined in CSS 2.1 Section 9.4.

BFC

Informal abbreviation for block formatting context. Often used to refer to a block formatting context root, that is, a block box that establishes a new block formatting context for its contents.

Acknowledgments

Changes

• Removed display-inside, display-outside, and display-extras longhands, in favor of just making 'display' 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.)
• Created the ''flow'' and ''flow-root'' inner display types to better express flow layout display types and to create an explicit switch for making an element a BFC root. (This should eliminate the need for hacks like ''::after { clear: both; }'' and ''overflow: hidden'' that are intended to accomplish this purpose.)