CSS Layout - The display Property

The display property in CSS is a fundamental aspect of web page layout. It dictates how an element is displayed on the page, influencing its position, spacing, and behavior with other elements. Understanding its various values and applications is crucial for crafting well-structured and visually appealing web designs.

Understanding Default Display Behaviors

Before diving into specific values, let's establish the default display behaviors of different element types:

  1. Block-level elements: These elements start on a new line and occupy the full width available (e.g., div, h1, p).
  2. Inline elements: These elements flow within a line alongside other content (e.g., span, em, a).

Common Display Values and Their Effects

Here are the various values that the display property can take:


This value makes the element generate a block-level box. It means the element will start on a new line and stretch the entire width of its container by default.

div { display: block; }


This value makes the element generate an inline-level box. Inline elements flow within the text of a document, meaning they don't start on a new line and only take up as much width as necessary.

span { display: inline; }


This value combines the features of both inline and block. The element generates an inline-level block container that behaves as an inline element but allows the setting of width and height.

div { display: inline-block; }


This value makes the element invisible and does not leave any space for it in the layout. Essentially, it removes the element from the document flow.

.hidden { display: none; }

Advanced Layout Techniques with Display


This value turns the element into a flex container. Flexbox layout provides a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic.

.container { display: flex; }


This value turns the element into a grid container. CSS Grid Layout offers a two-dimensional layout system, allowing you to define columns and rows for the content.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
Full Source Example:
run this source code Browser View
Block Element
Inline Element Another Inline Element
Inline-Block Element
Flex Item 1
Flex Item 2
Flex Item 3
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6
Row 1, Cell 1
Row 1, Cell 2
Row 1, Cell 3
Row 2, Cell 1
Row 2, Cell 2
Row 2, Cell 3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Display Property Example</title> <style> /* Block Level Element */ .block { display: block; width: 200px; height: 100px; background-color: lightblue; margin-bottom: 10px; } /* Inline Level Element */ .inline { display: inline; background-color: lightgreen; padding: 5px; margin-right: 10px; } /* Inline-Block Level Element */ .inline-block { display: inline-block; width: 100px; height: 100px; background-color: lightcoral; margin-bottom: 10px; } /* None Display Element */ .hidden { display: none; } /* Flex Container */ .flex-container { display: flex; justify-content: space-between; } /* Grid Container */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Table-like Layout */ .div-table { display: table; width: 100%; border-collapse: collapse; } .div-table-row { display: table-row; } .div-table-cell { display: table-cell; padding: 5px; border: 1px solid #ccc; } </style> </head> <body> <!-- Block Level Element --> <div class="block">Block Element</div> <!-- Inline Level Element --> <span class="inline">Inline Element</span> <span class="inline">Another Inline Element</span> <!-- Inline-Block Level Element --> <div class="inline-block">Inline-Block Element</div> <!-- None Display Element --> <div class="hidden">Hidden Element</div> <!-- Flex Container --> <div class="flex-container"> <div style="background-color: lightpink;">Flex Item 1</div> <div style="background-color: lightskyblue;">Flex Item 2</div> <div style="background-color: lightseagreen;">Flex Item 3</div> </div> <!-- Grid Container --> <div class="grid-container"> <div style="background-color: lightyellow;">Grid Item 1</div> <div style="background-color: lightblue;">Grid Item 2</div> <div style="background-color: lightgreen;">Grid Item 3</div> <div style="background-color: lightcoral;">Grid Item 4</div> <div style="background-color: lightsalmon;">Grid Item 5</div> <div style="background-color: lightseagreen;">Grid Item 6</div> </div> <!-- Table-like Layout --> <div class="div-table"> <div class="div-table-row"> <div class="div-table-cell">Row 1, Cell 1</div> <div class="div-table-cell">Row 1, Cell 2</div> <div class="div-table-cell">Row 1, Cell 3</div> </div> <div class="div-table-row"> <div class="div-table-cell">Row 2, Cell 1</div> <div class="div-table-cell">Row 2, Cell 2</div> <div class="div-table-cell">Row 2, Cell 3</div> </div> </div> </body> </html>


The CSS display property determines how an HTML element is rendered on a webpage. It offers options such as block, inline, and none, influencing layout, visibility, and behavior. By selecting an appropriate value, developers control whether elements behave as blocks, inline elements within text, or are hidden entirely from view.