CSS Display Understanding Display Property

Introduction

The CSS display property is a powerful tool in web design and development. It determines how elements are laid out and interact within a web page. This property lets you control if an element is a block, inline, or part of a more complex layout like flexbox or grid. It’s crucial for creating responsive and visually appealing designs.

In this article, we’ll explore the different values of the display property, understand what they mean, and see how they can be used to create various layouts. We’ll cover the syntax, types of displays, accessibility considerations, and provide examples to help you understand how the display property works. Whether you’re a seasoned developer or just starting with CSS, this guide will help you master the display property and enhance your web development skills.

Specification

The display property in CSS is defined by the CSS Display Module Level 3 specification. This module explains how the display property works and what values it can take. It provides a comprehensive framework for controlling the layout and rendering of elements on a web page.

The CSS Display Module Level 3 introduces a multi-keyword syntax that allows for more precise control over an element’s display behavior. This syntax lets you specify both the outer and inner display types, giving you more flexibility in how elements are laid out and how their children are rendered.

The specification also addresses accessibility concerns, ensuring that the display property is used in a way that keeps web content accessible. It provides guidelines for using values like none and contents to ensure that elements remain accessible to assistive technologies.

By understanding the CSS Display Module Level 3 specification, developers can effectively use the display property to create responsive and accessible web designs. The specification is a valuable resource for mastering the display property and enhancing web development skills.

Syntax

The CSS display property is specified using keyword values that define an element’s display behavior. The syntax for the display property is straightforward and allows for both single and multi-keyword values.

Here is the basic syntax for the display property:

display: value;

Single Keyword Values

Single keyword values are used to set a single display type for an element. These values are straightforward and include common display types like block, inline, flex, and grid.

Multi-Keyword Values

The CSS Display Module Level 3 specification introduces a multi-keyword syntax that provides more control over an element’s display behavior. This syntax allows developers to specify both the outer and inner display types, offering greater flexibility in layout design.

Here is an example of the multi-keyword syntax:

display: outer-value inner-value;

• Outer Value: Defines the element’s role in the document flow (e.g., block, inline).
• Inner Value: Defines the layout model used for the element’s children (e.g., flow, flex, grid).

Common Examples

/* Single keyword values */
display: block;
display: inline;
display: flex;

/* Multi-keyword values */
display: block flow;
display: inline flex;
display: grid;

/* Box generation values */
display: none;
display: contents;

/* Global values */
display: inherit;
display: initial;
display: unset;

Notes on Syntax

• When using single-keyword values, browsers that support the multi-keyword syntax will automatically set the inner value to flow if only an outer value is provided (e.g., display: block becomes display: block flow).
• For backward compatibility, precomposed legacy values like inline-block and inline-flex are also supported. These values are equivalent to their multi-keyword counterparts (e.g., inline-block is equivalent to inline flow-root).

Example Code

/* Single keyword value */
.container {
  display: block;
}

/* Multi-keyword value */
.container {
  display: inline flex;
}

/* Box generation value */
.container {
  display: none;
}

By understanding the syntax of the display property, developers can effectively control the layout and behavior of elements on a web page. This knowledge is essential for creating responsive and visually appealing web designs.

Outer Display Types

Outer display types define an element’s role in the document flow, determining how it interacts with other elements and the overall layout of the page. These types are essential for shaping the structure and appearance of a web page. The outer display types include block, inline, and run-in.

block

The block value generates a block box, which starts on a new line and takes up the full width available within its containing element. This type of box creates line breaks both before and after the element, ensuring that content above and below it is separated. Block-level elements are commonly used for creating distinct sections or containers within a web page.

display: block;

inline

The inline value generates one or more inline boxes that do not create line breaks before or after themselves. Inline elements flow with the surrounding content, meaning they will appear on the same line if there is enough space. This type of box is useful for elements that need to be displayed within a line of text, such as links, images, or small icons.

display: inline;

run-in

The run-in value is a unique display type that allows an element to behave as either a block or an inline element, depending on the context. If the run-in element is followed by a block element, it will be rendered as an inline element within that block. Otherwise, it behaves like a block element. This display type is less commonly used but can be useful in specific layout scenarios.

display: run-in;

Notes on Outer Display Types

• When using the block or inline values, the inner display type is automatically set to flow by browsers that support the multi-keyword syntax. This means that display: block is equivalent to display: block flow, and display: inline is equivalent to display: inline flow.
• The run-in value provides a way to conditionally render elements as either block or inline, depending on the surrounding content.

Example Code

/* Block element */
.block-element {
  display: block;
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
}

/* Inline element */
.inline-element {
  display: inline;
  background-color: lightgreen;
  padding: 5px;
  margin: 5px;
}

/* Run-in element */
.run-in-element {
  display: run-in;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px 0;
}

By understanding and utilizing outer display types, developers can control the layout and flow of elements on a web page, creating structured and visually appealing designs. These types are fundamental to CSS and play a crucial role in web development and design.

Inner Display Types

Inner display types define the layout model used for an element’s children. They determine how the content inside an element is laid out and rendered. These types are crucial for creating complex and responsive layouts within a web page. The inner display types include flow, flow-root, table, flex, grid, and ruby.

flow

The flow value lays out an element’s contents using flow layout, which is the default behavior for block-level and inline-level elements. If the outer display type is inline, the element generates an inline box. Otherwise, it generates a block container box. Depending on other CSS properties and the formatting context, it either establishes a new block formatting context (BFC) or integrates its contents into its parent formatting context.

display: flow;

flow-root

The flow-root value generates a block box that establishes a new block formatting context (BFC). This type is useful for containing floats and ensuring that the element’s contents are isolated from the surrounding layout. It is particularly helpful in creating self-contained layout components.

display: flow-root;

table

The table value causes an element to behave like an HTML <table> element. It defines a block-level box and is used to create table-like structures within a web page. This type is useful for displaying tabular data or creating complex layouts that mimic table behavior.

display: table;

flex

The flex value causes an element to behave like a block-level element and lays out its content according to the flexbox model. Flexbox is a powerful layout model that allows for flexible, one-dimensional layouts. It is ideal for creating responsive designs and aligning items within a container.

display: flex;

grid

The grid value causes an element to behave like a block-level element and lays out its content according to the grid model. CSS Grid is a two-dimensional layout model that provides a robust system for creating complex grid-based layouts. It is highly versatile and suitable for a wide range of design needs.

display: grid;

ruby

The ruby value causes an element to behave like an inline-level element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML <ruby> elements, which are used for annotating characters, typically for East Asian typography.

display: ruby;

Notes on Inner Display Types

• When using the display property with only an inner value (e.g., display: flex or display: grid), the outer value is automatically set to block by browsers that support the multi-keyword syntax. This means that display: flex is equivalent to display: block flex, and display: grid is equivalent to display: block grid.
• The flow value is the default inner display type for elements with outer display types of block or inline.

Example Code

/* Flow layout */
.flow-container {
  display: flow;
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
}

/* Flow-root layout */
.flow-root-container {
  display: flow-root;
  background-color: lightgreen;
  padding: 10px;
  margin: 10px 0;
}

/* Table layout */
.table-container {
  display: table;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px 0;
}

/* Flex layout */
.flex-container {
  display: flex;
  background-color: lightyellow;
  padding: 10px;
  margin: 10px 0;
}

/* Grid layout */
.grid-container {
  display: grid;
  background-color: lightpink;
  padding: 10px;
  margin: 10px 0;
}

/* Ruby layout */
.ruby-container {
  display: ruby;
  background-color: lightseagreen;
  padding: 10px;
  margin: 10px 0;
}

By understanding and utilizing inner display types, developers can create complex and responsive layouts within a web page. These types are essential for controlling the layout and behavior of an element’s children, enabling the creation of visually appealing and functional designs.

List Item Display

The list-item value of the display property allows an element to behave like a list item, similar to an HTML <li> element. This value generates a block box for the content and a separate list-item inline box for the list marker. It is particularly useful for creating custom list styles and ensuring consistency in the presentation of list items.

Syntax

display: list-item;

Characteristics

• Block Box: The content of the element is contained within a block box, which means it starts on a new line and takes up the full width available within its containing element.
• List-Item Inline Box: A separate inline box is generated for the list marker (bullet, number, etc.). This box is positioned according to the list style properties, such as list-style-type and list-style-position.

Usage

The list-item value can be used on its own or in combination with other display values. When used alone, it behaves as a block-level list item. However, it can also be combined with outer display types (<display-outside>) and inner display types (<display-inside>).

Example

/* Single value */
.list-item {
  display: list-item;
  list-style-type: disc; /* Sets the list marker to a disc */
  list-style-position: inside; /* Positions the list marker inside the content box */
}

/* Combined with outer display type */
.list-item-inline {
  display: inline list-item;
  list-style-type: square; /* Sets the list marker to a square */
  list-style-position: outside; /* Positions the list marker outside the content box */
}

/* Combined with inner display type */
.list-item-flex {
  display: block flow list-item;
  list-style-type: decimal; /* Sets the list marker to a number */
  list-style-position: inside; /* Positions the list marker inside the content box */
}

Notes

• When the list-item value is used without specifying an outer display type, the principal box will have an outer display type of block.
• If no inner value is specified, it will default to flow.
• The list-item value can be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords.

Example Code

/* List item element */
.list-item {
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
}

/* Inline list item element */
.list-item-inline {
  display: inline list-item;
  list-style-type: square;
  list-style-position: outside;
  background-color: lightgreen;
  padding: 5px;
  margin: 5px;
}

/* Flex list item element */
.list-item-flex {
  display: block flow list-item;
  list-style-type: decimal;
  list-style-position: inside;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px 0;
}

By understanding and utilizing the list-item display type, developers can create custom list styles and ensure consistency in the presentation of list items. This type is essential for controlling the layout and behavior of list elements, enabling the creation of visually appealing and functional designs.

<!DOCTYPE html>
<html>
<head>
  <style>
    .list-item {
      display: list-item;
      list-style-type: disc;
      list-style-position: inside;
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }

    .list-item-inline {
      display: inline list-item;
      list-style-type: square;
      list-style-position: outside;
      background-color: lightgreen;
      padding: 10px;
      margin: 10px 0;
    }

    .list-item-flex {
      display: block flow list-item;
      list-style-type: decimal;
      list-style-position: inside;
      background-color: lightcoral;
      padding: 10px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="list-item">This is a block list item.</div>
  <div class="list-item-inline">This is an inline list item.</div>
  <div class="list-item-flex">This is a flex list item.</div>
</body>
</html>

Using the list-item display value, developers can create custom and consistent list styles. This value is great for presenting list items flexibly, ensuring a cohesive and visually appealing layout.

Internal Display Values

Internal display values define the behavior of specific roles within complex layout models, like tables and ruby text. These values help create detailed and intricate layouts, especially useful for tabular data or annotated text.

Table-Related Internal Display Values

• table-row-group: Behaves like an HTML <tbody> element.
• table-header-group: Behaves like an HTML <thead> element.
• table-footer-group: Behaves like an HTML <tfoot> element.
• table-row: Behaves like an HTML <tr> element.
• table-cell: Behaves like an HTML <td> element.
• table-column-group: Behaves like an HTML <colgroup> element.
• table-column: Behaves like an HTML <col> element.
• table-caption: Behaves like an HTML <caption> element.

Ruby-Related Internal Display Values

• ruby-base: Behaves like an HTML <rb> element.
• ruby-text: Behaves like an HTML <rt> element.
• ruby-base-container: Behaves as an anonymous box for ruby base text.
• ruby-text-container: Behaves like an HTML <rtc> element.

Example Code

/* Table-related internal display values */
.table-row-group {
  display: table-row-group;
  background-color: lightblue;
}

.table-header-group {
  display: table-header-group;
  background-color: lightgreen;
}

.table-footer-group {
  display: table-footer-group;
  background-color: lightcoral;
}

.table-row {
  display: table-row;
  background-color: lightyellow;
}

.table-cell {
  display: table-cell;
  background-color: lightpink;
}

.table-column-group {
  display: table-column-group;
  background-color: lightseagreen;
}

.table-column {
  display: table-column;
  background-color: lightgray;
}

.table-caption {
  display: table-caption;
  background-color: lightgoldenrodyellow;
}

/* Ruby-related internal display values */
.ruby-base {
  display: ruby-base;
  background-color: lightblue;
}

.ruby-text {
  display: ruby-text;
  background-color: lightgreen;
}

.ruby-base-container {
  display: ruby-base-container;
  background-color: lightcoral;
}

.ruby-text-container {
  display: ruby-text-container;
  background-color: lightyellow;
}

These internal display values are essential for specialized layouts and typography, allowing precise control over complex content presentation.

Box Generation Values

Box generation values control whether an element generates display boxes. These values are crucial for managing the visibility and rendering of elements within a web page.

contents

The contents value makes an element not generate any box by itself. Instead, it is replaced by its pseudo-box and its child boxes. This means the element does not occupy any space in the layout, but its contents are rendered as if they were direct children of the element’s parent.

Use Cases:

• Removing unnecessary wrappers: Great for elements used only for grouping or styling.
• Creating more accessible markup: Helps create more accessible and semantic HTML structures.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrapper {
      display: contents;
    }

    .child {
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
</body>
</html>

none

The none value removes the element from the document flow, making it invisible and taking up no space in the layout. All descendant elements also have their display turned off. This value is useful for hiding elements without affecting the layout of the page.

Use Cases:

• Hiding elements: Great for hiding elements and their contents completely.
• Conditional rendering: Useful in JavaScript for conditionally hiding elements based on user interactions or other conditions.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }

    .visible {
      background-color: lightgreen;
      padding: 10px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="visible">Visible Element</div>
  <div class="hidden">Hidden Element</div>
</body>
</html>

Notes on Box Generation Values

• Accessibility: Using display: none will remove the element from the accessibility tree, meaning it will not be announced by screen readers. For accessibility, consider using other methods like visibility: hidden or opacity: 0 to hide elements while keeping them accessible.
• Performance: Using display: none can improve performance by reducing the number of elements that need to be rendered, but it should be used judiciously to avoid unnecessary reflows and repaints.

Example Code

/* Using display: contents */
.wrapper {
  display: contents;
}

.child {
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
}

/* Using display: none */
.hidden {
  display: none;
}

.visible {
  background-color: lightgreen;
  padding: 10px;
  margin: 10px 0;
}

Precomposed Values

Precomposed values in the CSS display property are single-keyword values that combine outer and inner display types into one. These values simplify the syntax for common layout scenarios and help maintain backward compatibility with older browsers.

Common Precomposed Values

inline-block

The inline-block value makes an element generate a block box that flows with surrounding content as if it were a single inline box. This value is equivalent to inline flow-root in the multi-keyword syntax. It is commonly used to create block-level elements that can be positioned inline with other elements.

display: inline-block;

Use Cases:

• Inline with block behavior: When you need an element to behave like a block element but want it to flow inline with other elements.
• Responsive design: For creating responsive layouts where elements need to adapt to different screen sizes and positions.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-block {
      display: inline-block;
      background-color: lightblue;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="inline-block">Inline Block 1</div>
  <div class="inline-block">Inline Block 2</div>
</body>
</html>

inline-table

The inline-table value makes an element behave like an HTML <table> element but as an inline box rather than a block-level box. This value is equivalent to inline table in the multi-keyword syntax. It allows for table-like structures to be displayed inline with other content.

display: inline-table;

Use Cases:

• Inline tables: When you need to display tabular data inline with other content.
• Complex layouts: For creating complex layouts that require table-like structures but need to flow inline.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-table {
      display: inline-table;
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
    }

    .inline-table div {
      display: table-cell;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="inline-table">
    <div>Cell 1</div>
    <div>Cell 2</div>
  </div>
</body>
</html>

inline-flex

The inline-flex value makes an element behave like an inline-level element and lays out its content according to the flexbox model. This value is equivalent to inline flex in the multi-keyword syntax. It is useful for creating flexible, one-dimensional layouts that flow inline with other content.

display: inline-flex;

Use Cases:

• Inline flexbox: When you need a flexbox container that flows inline with other elements.
• Responsive design: For creating responsive layouts where elements need to adapt to different screen sizes and positions.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-flex {
      display: inline-flex;
      background-color: lightgreen;
      padding: 10px;
      margin: 10px;
    }

    .inline-flex div {
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="inline-flex">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
  </div>
</body>
</html>

Using these precomposed values, developers can create more efficient and manageable layouts while maintaining compatibility with older browsers.

The inline-grid Value

The inline-grid value makes an element behave like an inline element and lays out its content in a grid format. It’s the same as using inline grid in the multi-keyword syntax. It’s great for creating grid-based layouts that flow inline with other content.

display: inline-grid;

Use Cases:

• Inline grid: When you need a grid container that flows inline with other elements.
• Complex layouts: For creating complex layouts that require grid-based structures but need to flow inline.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-grid {
      display: inline-grid;
      background-color: lightcoral;
      padding: 10px;
      margin: 10px;
      grid-template-columns: auto auto;
    }

    .inline-grid div {
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="inline-grid">
    <div>Grid Item 1</div>
    <div>Grid Item 2</div>
    <div>Grid Item 3</div>
    <div>Grid Item 4</div>
  </div>
</body>
</html>

Notes on Precomposed Values

• Backward Compatibility: Precomposed values ensure compatibility with older browsers that may not support the multi-keyword syntax.
• Simplicity: These values provide a straightforward way to define common layout scenarios without the need for complex syntax.
• Usage: Precomposed values are widely used in web development for their simplicity and compatibility, making them a reliable choice for many layout tasks.

Example Code

/* Inline-block */
.inline-block {
  display: inline-block;
  background-color: lightblue;
  padding: 10px;
  margin: 10px;
}

/* Inline-table */
.inline-table {
  display: inline-table;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.inline-table div {
  display: table-cell;
  padding: 5px;
}

/* Inline-flex */
.inline-flex {
  display: inline-flex;
  background-color: lightgreen;
  padding: 10px;
  margin: 10px;
}

.inline-flex div {
  margin: 5px;
}

/* Inline-grid */
.inline-grid {
  display: inline-grid;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px;
  grid-template-columns: auto auto;
}

.inline-grid div {
  padding: 5px;
}

Which Syntax to Use?

The CSS display property supports both single-keyword (precomposed) and multi-keyword syntax. Understanding when to use each syntax can help you create more efficient and maintainable layouts.

Single-Keyword Syntax

The single-keyword syntax is straightforward and widely supported across all browsers. It’s particularly useful for maintaining backward compatibility with older browsers that may not recognize the multi-keyword syntax. Common precomposed values include inline-block, inline-flex, inline-grid, and inline-table.

Examples:

/* Precomposed values */
.container {
  display: inline-block;
}

.flex-container {
  display: inline-flex;
}

.grid-container {
  display: inline-grid;
}

.table-container {
  display: inline-table;
}

When to Use:

• Backward Compatibility: Use single-keyword values when you need to support older browsers that do not understand the multi-keyword syntax.
• Simplicity: Use single-keyword values for straightforward layouts where the outer and inner display types do not need to be explicitly defined.

Multi-Keyword Syntax

The multi-keyword syntax provides greater control over an element’s display behavior by allowing you to specify both the outer and inner display types explicitly. This syntax is particularly useful for creating complex and responsive layouts.

Examples:

/* Multi-keyword values */
.container {
  display: inline flex;
}

.grid-container {
  display: block grid;
}

.table-container {
  display: inline table;
}

When to Use:

• Complex Layouts: Use multi-keyword values when you need precise control over an element’s outer and inner display types.
• Responsive Design: Use multi-keyword values to create responsive layouts that adapt to different screen sizes and contexts.

Combining Both Syntaxes

In some cases, you may want to use both single-keyword and multi-keyword syntax to ensure compatibility and flexibility. By providing fallbacks, you can ensure that your layouts work across a wide range of browsers.

Example:

/* Fallback for older browsers */
.container {
  display: inline-flex;
}

/* Multi-keyword syntax for modern browsers */
.container {
  display: inline flex;
}

When to Use:

• Progressive Enhancement: Use both syntaxes to provide a fallback for older browsers while taking advantage of the enhanced control offered by the multi-keyword syntax in modern browsers.

Best Practices

• Testing: Always test your layouts across different browsers to ensure compatibility and consistency.
• Documentation: Document your usage of the display property to make it easier for other developers to understand your layout choices.
• Simplicity: Use the simplest syntax that meets your needs to keep your code maintainable and easy to understand.

Global Values

Global values for the display property allow you to inherit, revert, or unset the display behavior of an element. These values are useful for maintaining consistency and managing inheritance in your CSS.

inherit

The inherit value makes an element inherit the display value from its parent element. This is useful for ensuring consistency in the layout behavior of nested elements.

display: inherit;

Example:

.parent {
  display: flex;
}

.child {
  display: inherit; /* Inherits the display value from .parent */
}

initial

The initial value sets the display property to its default value, which is typically inline for most elements. This is useful for resetting the display behavior of an element to its initial state.

display: initial;

Example:

.reset {
  display: initial; /* Resets the display value to its default */
}

revert

The revert value reverts the display property to the value specified by the user agent’s default stylesheet. This is useful for undoing any author styles and returning to the browser’s default behavior.

display: revert;

Example:

.revert {
  display: revert; /* Reverts the display value to the browser's default */
}

unset

The unset value acts like inherit if the display property is inherited, or like initial if it is not. This is useful for removing any custom display values and allowing the element to inherit or revert to its default behavior.

display: unset;

Example:

.unset {
  display: unset; /* Unsets the display value, allowing it to inherit or revert */
}

Example Code

/* Using global values */
.parent {
  display: flex;
}

.child {
  display: inherit; /* Inherits the display value from .parent */
}

.reset {
  display: initial; /* Resets the display value to its default */
}

.revert {
  display: revert; /* Reverts the display value to the browser's default */
}

.unset {
  display: unset; /* Unsets the display value, allowing it to inherit or revert */
}

By understanding and utilizing global values, developers can maintain consistency and manage inheritance in their CSS. These values provide flexible options for controlling the display behavior of elements, ensuring that layouts are cohesive and easy to maintain. Whether you need to inherit, revert, or unset display values, global values offer the tools needed to create effective and efficient web designs.

Multi-keyword Values

The CSS display property supports a multi-keyword syntax that allows developers to specify both the outer and inner display types of an element. This syntax provides greater control over an element’s display behavior, enabling more complex and responsive layouts. Multi-keyword values are particularly useful for specifying how an element interacts with the document flow and how its children are laid out.

Syntax

The multi-keyword syntax for the display property is structured as follows:

display: outer-value inner-value;

• Outer Value: Defines the element’s role in the document flow (e.g., block, inline).
• Inner Value: Defines the layout model used for the element’s children (e.g., flow, flex, grid).

Examples

Block Flex Container

To create a block-level element that uses the flexbox model for its children:

.flex-container {
  display: block flex;
}

Inline Grid Container

To create an inline-level element that uses the grid model for its children:

.grid-container {
  display: inline grid;
}

Inline Flow Container

To create an inline-level element that uses the flow layout model for its children:

.flow-container {
  display: inline flow;
}

Benefits of Multi-keyword Syntax

• Precision: The multi-keyword syntax allows for precise control over an element’s display behavior, enabling developers to create complex and responsive layouts.
• Flexibility: By specifying both the outer and inner display types, developers can create a wide range of layouts that adapt to different screen sizes and contexts.
• Clarity: The multi-keyword syntax is clear and explicit, making it easier to understand and maintain the layout code.

Notes on Multi-keyword Syntax

• Backward Compatibility: Browsers that support the multi-keyword syntax will automatically set the inner value to flow if only an outer value is provided (e.g., display: block becomes display: block flow).
• Precomposed Values: For backward compatibility, precomposed legacy values like inline-block and inline-flex are also supported. These values are equivalent to their multi-keyword counterparts (e.g., inline-block is equivalent to inline flow-root).

Example Code

/* Inline-block */
.inline-block {
  display: inline-block;
  background-color: lightblue;
  padding: 10px;
  margin: 10px;
}

/* Inline-table */
.inline-table {
  display: inline-table;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.inline-table div {
  display: table-cell;
  padding: 5px;
}

/* Inline-flex */
.inline-flex {
  display: inline-flex;
  background-color: lightgreen;
  padding: 10px;
  margin: 10px;
}

.inline-flex div {
  margin: 5px;
}

/* Inline-grid */
.inline-grid {
  display: inline-grid;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px;
  grid-template-columns: auto auto;
}

.inline-grid div {
  padding: 5px;
}

By understanding and utilizing the multi-keyword syntax, developers can create more complex and responsive layouts. This syntax provides greater control over an element’s display behavior, making it easier to create flexible and adaptable designs. Whether you need to specify the outer and inner display types explicitly or provide fallbacks for older browsers, the multi-keyword syntax offers the tools needed to create effective and efficient web designs.

CSS Display Property

The display property in CSS helps control how elements are laid out on a web page. There are several values for display, but let’s focus on the most common ones: block, inline, flex, and grid.

display: block

• Characteristics:

  • Starts on a new line.
  • Takes up the full width available.
  • Creates line breaks before and after the element.

• Use Cases:

  • Great for containers and sections.
  • Useful for separating content into distinct sections.

• Example:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="block-element">Block Element 1</div>
    <div class="block-element">Block Element 2</div>
  </body>
  </html>

display: inline

• Characteristics:

  • No line breaks before or after the element.
  • Flows with the surrounding content.
  • Width and height properties have no effect.

• Use Cases:

  • Ideal for links, images, and other elements that should flow with text.
  • Useful for applying styles to text or small icons without disrupting the flow.

• Example:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">Inline Element 1</span>
    <span class="inline-element">Inline Element 2</span>
  </body>
  </html>

Notes on CSS Flow Layout

• Default Values: Many HTML elements have default display values. For example, <div> elements are block-level by default, while <span> elements are inline by default.
• Flexibility: Understanding when to use block and inline values is key to creating flexible and responsive layouts.
• Accessibility: Proper use of block and inline values can enhance the accessibility of your web pages.

display: flex

• Characteristics:

  • Behaves like a block-level element.
  • Lays out content according to the flexbox model.
  • The element becomes a flex container, and its direct children become flex items.

• Use Cases:

  • Ideal for creating responsive designs.
  • Useful for aligning items horizontally and vertically.

• Example:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      .flex-container {
        display: flex;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
      }
      .flex-item {
        background-color: lightcoral;
        padding: 10px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Flex Item 1</div>
      <div class="flex-item">Flex Item 2</div>
      <div class="flex-item">Flex Item 3</div>
    </div>
  </body>
  </html>

Flexbox Properties

• Flex Container Properties:

  • flex-direction: Defines the direction of the main axis (row or column).
  • justify-content: Aligns items along the main axis.
  • align-items: Aligns items along the cross axis.

• Flex Item Properties:

  • flex-grow: Specifies the growth factor of a flex item.
  • flex-shrink: Specifies the shrink factor of a flex item.
  • flex-basis: Specifies the initial size of a flex item.

• Example with Flexbox Properties:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
      }
      .flex-item {
        background-color: lightcoral;
        padding: 10px;
        margin: 5px;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Flex Item 1</div>
      <div class="flex-item">Flex Item 2</div>
      <div class="flex-item">Flex Item 3</div>
    </div>
  </body>
  </html>

display: grid

• Characteristics:

  • Behaves like a block-level element.
  • Lays out content according to the CSS Grid Layout model.
  • The element becomes a grid container, and its direct children become grid items.

• Use Cases:

  • Ideal for creating complex and intricate layouts.
  • Useful for designing layouts that require both horizontal and vertical alignment.

• Example:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
      }
      .grid-item {
        background-color: lightcoral;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
      <div class="grid-item">Grid Item 5</div>
      <div class="grid-item">Grid Item 6</div>
    </div>
  </body>
  </html>

Grid Properties

• Grid Container Properties:
  • grid-template-columns: Defines the columns of the grid.
  • grid-template-rows: Defines the rows of the grid.
  • grid-gap: Specifies the gap between grid items.
  • grid-template-areas: Defines named areas within the grid.

By understanding and utilizing the display property values (block, inline, flex, and grid), developers can effectively control the layout and flow of elements on a web page. These values are fundamental to CSS and play a crucial role in creating structured and visually appealing designs.

CSS Grid Layout Properties

• grid-column: Sets the column(s) a grid item spans.

  .grid-item {
    grid-column: 1 / 3; /* Spans from column 1 to column 3 */
  }

• grid-row: Sets the row(s) a grid item spans.

  .grid-item {
    grid-row: 1 / 3; /* Spans from row 1 to row 3 */
  }

• grid-area: Assigns a named area to a grid item.

  .grid-item {
    grid-area: header; /* Assigns the grid item to the "header" area */
  }

Example with Grid Properties

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto 1fr;
      grid-gap: 10px;
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }

    .grid-item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }

    .header {
      grid-area: header;
    }

    .sidebar {
      grid-area: sidebar;
    }

    .content {
      grid-area: content;
    }

    .footer {
      grid-area: footer;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item header">Header</div>
    <div class="grid-item sidebar">Sidebar</div>
    <div class="grid-item content">Content</div>
    <div class="grid-item footer">Footer</div>
  </div>
</body>
</html>

Notes on display: grid

• Browser Support: CSS Grid is widely supported in modern browsers.
• Performance: Complex grid layouts with many nested containers may impact performance.
• Accessibility: Ensure your layout is accessible by using appropriate HTML elements and ARIA roles.

Animating display Property

Animating the display property can be tricky because it doesn’t transition smoothly between values. However, with the right techniques, you can create effective animations.

Discrete Animation Type

The display property is a discrete animation type, meaning it flips between two values at 50% through the animation duration. For example, animating from display: none to display: block will show the element suddenly.

CSS Animations

When using CSS animations to animate the display property, provide the starting display value in an explicit keyframe.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      opacity: 0;
      display: none;
      animation: fadeIn 2s forwards;
    }

    @keyframes fadeIn {
      0% {
        display: block;
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">Fade In</div>
</body>
</html>

CSS Transitions

Animating display with CSS transitions requires additional features:

1. @starting-style: Provides starting values for properties you want to transition from when the animated element is first shown.
2. transition-behavior: allow-discrete: Needs to be set on the transition-property declaration to enable display transitions.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      opacity: 0;
      display: none;
      transition: opacity 2s, display 2s;
      transition-behavior: allow-discrete;
    }

    .container.show {
      display: block;
      opacity: 1;
    }

    @starting-style {
      .container {
        display: block;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">Fade In</div>
  <button onclick="document.querySelector('.container').classList.add('show')">Show</button>
</body>
</html>

Use Cases for Animating display

• Entry/Exit Animations: Create smooth entry and exit animations.
• Visibility Control: Control the visibility of elements.
• Enhanced User Experience: Make user interfaces more engaging and dynamic.

Notes on Animating display

• Browser Support: Support for animating display varies across browsers. Always test your animations.
• Performance: Animating display can have performance implications. Use animations judiciously.
• Accessibility: Ensure animations do not negatively impact accessibility. Use appropriate ARIA roles and properties.

Accessibility Considerations

When using the display property, consider the impact on accessibility.

display: none

Using display: none removes an element from the accessibility tree, making it invisible to assistive technologies.

Alternative Methods:

• Visibility: Use visibility: hidden to hide an element while keeping it accessible.
• Off-Screen Techniques: Move the element off-screen using CSS.

/* Off-screen technique */
.hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="hidden">This content is hidden but accessible</div>
</body>
</html>

display: contents

Using display: contents can remove elements from the accessibility tree in some browsers.

Best Practices:

• Avoid Using display: contents: Whenever possible, avoid using display: contents if it impacts accessibility.
• Test Across Browsers: Always test your web pages in different browsers and with various assistive technologies.

Tables and the display Property

Changing the display value of a <table> element can alter its representation in the accessibility tree.

Best Practices:

• Maintain Semantic HTML: Use semantic HTML elements to ensure the structure of your content is clear and accessible.
• ARIA Roles: Use ARIA roles to provide additional context and improve the accessibility of complex layouts.

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-table {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
  </style>
</head>
<body>
  <div class="grid-table" role="table">
    <div role="row">
      <div role="cell">Cell 1</div>
      <div role="cell">Cell 2</div>
      <div role="cell">Cell 3</div>
    </div>
    <div role="row">
      <div role="cell">Cell 4</div>
      <div role="cell">Cell 5</div>
      <div role="cell">Cell 6</div>
    </div>
  </div>
</body>
</html>

Resources for Further Reading

• Using ARIA to enhance web accessibility
• CSS Display and Accessibility
• Hidden content for better accessibility
• MDN Understanding WCAG

By considering accessibility when using the display property, developers can ensure that their web content remains accessible to all users. Proper use of the display property, along with semantic HTML and ARIA roles, can enhance the user experience and make web pages more inclusive. Always test your layouts with assistive technologies to ensure that your content is accessible and easy to navigate.

Formal Definition

The CSS display property is defined by the CSS Display Module Level 3 specification, which provides a comprehensive framework for controlling the layout and rendering of elements on a web page. This property determines an element’s display behavior, including its role in the document flow and the layout model used for its children.

Property Name: display

Initial Value: inline

Applies To: All elements

Inherited: No

Computed Value: As specified, except for positioned and floating elements and the root element. In both cases, the computed value may be a keyword other than the one specified.

Animation Type: Discrete behavior except when animating to or from none is visible for the entire duration.

Syntax:

display = <display-outside> [<display-inside>]?
         | <display-listitem>
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | <display-outside> [<display-inside>]? <display-outside> [<display-inside>]?
         | <display-listitem> <display-outside>? [<display-inside>]?
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | inherit | initial | revert | revert-layer | unset;

<display-outside> = block | inline | run-in;
<display-inside> = flow | flow-root | table | flex | grid | ruby;
<display-listitem> = <display-outside>? [<display-inside>]? list-item;
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container;
<display-box> = contents | none;
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid;

Formal Syntax

The formal syntax of the display property is as follows:

/* Formal syntax for display */
display = <display-outside> [<display-inside>]?
         | <display-listitem>
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | <display-outside> [<display-inside>]? <display-outside> [<display-inside>]?
         | <display-listitem> <display-outside>? [<display-inside>]?
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | inherit | initial | revert | revert-layer | unset;

<display-outside> = block | inline | run-in;
<display-inside> = flow | flow-root | table | flex | grid | ruby;
<display-listitem> = <display-outside>? [<display-inside>]? list-item;
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container;
<display-box> = contents | none;
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid;

By understanding and utilizing the display property effectively, developers can create complex and responsive layouts that adapt to different screen sizes and orientations. CSS Grid and other layout models provide powerful and flexible ways to design two-dimensional grid-based layouts, making them essential tools for modern web design.

display = <display-outside> [<display-inside>]?
         | <display-listitem>
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | <display-outside> [<display-inside>]? <display-outside> [<display-inside>]?
         | <display-listitem> <display-outside>? [<display-inside>]?
         | <display-internal>
         | <display-box>
         | <display-legacy>
         | inherit | initial | revert | revert-layer | unset;

<display-outside> = block | inline | run-in;
<display-inside> = flow | flow-root | table | flex | grid | ruby;
<display-listitem> = <display-outside>? [<display-inside>]? list-item;
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container;
<display-box> = contents | none;
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid;

Key Components Explained

• <display-outside>: Defines the element’s role in the document flow (e.g., block, inline, run-in).
• <display-inside>: Defines the layout model used for the element’s children (e.g., flow, flex, grid).
• <display-listitem>: Specifies that the element behaves like a list item, which can be combined with outer and inner display types.
• <display-internal>: Specifies internal display values for complex layout models like tables and ruby text.
• <display-box>: Defines whether an element generates display boxes at all (e.g., contents, none).
• <display-legacy>: Includes precomposed values for backward compatibility (e.g., inline-block, inline-flex).

Example Code

Here are some practical examples to illustrate how the display property can be used to control the layout and behavior of elements on a web page.

Example 1: Block vs. Inline

<!DOCTYPE html>
<html>
<head>
  <style>
    .block-element {
      display: block;
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }

    .inline-element {
      display: inline;
      background-color: lightgreen;
      padding: 5px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="block-element">Block Element 1</div>
  <div class="block-element">Block Element 2</div>

  <span class="inline-element">Inline Element 1</span>
  <span class="inline-element">Inline Element 2</span>
</body>
</html>

Example 2: Flex Layout

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }

    .flex-item {
      background-color: lightcoral;
      padding: 10px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Flex Item 1</div>
    <div class="flex-item">Flex Item 2</div>
    <div class="flex-item">Flex Item 3</div>
  </div>
</body>
</html>

Example 3: Grid Layout

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      background-color: lightblue;
      padding: 10px;
      margin: 10px 0;
    }

    .grid-item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
    <div class="grid-item">Grid Item 5</div>
    <div class="grid-item">Grid Item 6</div>
  </div>
</body>
</html>