In this chapter, we will learn about the CSS display property, which is one of the most important properties for controlling the layout of elements on a web page. The display property specifies how an element is displayed on the web page. We will cover:
- Introduction to the Display Property
- Block-Level Elements
- Inline Elements
- Inline-Block Elements
- None Display
- Flexbox
- Grid
- Other Display Values
- Examples of Using the Display Property
Introduction to the Display Property
The display property defines the display behavior of an element. It determines how an element is rendered in the document flow. Different values of the display property can change the layout and positioning of elements.
Syntax
element {
display: value;
}
Block-Level Elements
Block-level elements start on a new line and take up the full width available. Common block-level elements include <div>, <p>, <h1> to <h6>, <ul>, and <ol>.
Example
div {
display: block;
}
HTML
<div>This is a block-level element.</div>
<p>This is another block-level element.</p>
Inline Elements
Inline elements do not start on a new line and only take up as much width as necessary. Common inline elements include <span>, <a>, <strong>, and <em>.
Example
span {
display: inline;
}
HTML
<p>This is a <span>inline</span> element.</p>
<a href="#">This is a link</a>
Inline-Block Elements
Inline-block elements are like inline elements, but they can have width and height properties. They do not start on a new line but respect the width and height settings.
Example
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightblue;
}
HTML
<div>Inline-block 1</div>
<div>Inline-block 2</div>
None Display
The none value hides an element, so it will not be displayed on the web page and will not take up any space.
Example
div {
display: none;
}
HTML
<div>This element is hidden.</div>
Flexbox
Flexbox is a layout model that allows you to create complex layouts with ease. It is designed to distribute space along a single axis and align elements within a container.
Example
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.item {
width: 100px;
height: 100px;
background-color: lightcoral;
}
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Grid
Grid is a powerful layout system for creating complex two-dimensional layouts. It allows you to define rows and columns and place items within a grid container.
Example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
}
.item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
Other Display Values
Display Table
The display: table value makes an element behave like a table. Combined with display: table-row and display: table-cell, you can create table-like layouts.
Example
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="container">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
</div>
Display List-Item
The display: list-item value makes an element behave like a list item.
Example
li {
display: list-item;
}
HTML
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Examples of Using the Display Property
Example 1: Block and Inline Elements
div {
display: block;
background-color: lightblue;
margin-bottom: 10px;
}
span {
display: inline;
background-color: lightgreen;
}
HTML
<div>Block-level element</div>
<p>This is an <span>inline</span> element inside a paragraph.</p>
Example 2: Flexbox Layout
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.item {
width: 100px;
height: 100px;
background-color: lightcoral;
}
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Example 3: Grid Layout
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
}
.item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
Conclusion
In this chapter, you learned about the CSS display property, including block-level elements, inline elements, inline-block elements, the none display, and advanced layouts using Flexbox and Grid. Understanding the display property is crucial for creating well-structured and responsive layouts.