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.
Before diving into specific values, let's establish the default display behaviors of different element types:
block
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;
}
inline
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;
}
inline-block
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;
}
none
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
flex
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;
}
grid
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:
Browser View
Block Element
Inline Element
Another Inline Element
Inline-Block Element
Hidden 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>
Conclusion
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.