In web design, controlling how elements are displayed on a webpage is essential for creating organized and visually appealing layouts. The CSS display property provides a powerful way to manage the rendering of elements, allowing developers to define whether an element should be treated as a block, inline, flex, grid, or none. This property is fundamental to understanding and manipulating the layout of a webpage.
The display property determines the type of rendering box used for an element. It can control the layout of elements, how they interact with each other, and their overall visibility. By mastering the display property, web designers can create complex layouts, hide elements without removing them from the document flow, and optimize the user experience. In this article, we will explore every display value and how to use them effectively.
Basic Setup
Before we dive into the different display values, let’s set up a basic example to demonstrate its functionality. We’ll create a simple HTML structure with some CSS to define our elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
</body>
</html>In this code, we define three <div> elements with the class box. Inside the CSS, we set the width, height, margin, and background color for the .box class to create visually distinct boxes. This basic setup provides a starting point for demonstrating various display property values.
Common display Values
display: block
The display: block value makes an element a block-level element. Block-level elements take up the full width available, and each block-level element starts on a new line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
#box1 {
display: block; /* Block display */
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
</body>
</html>In this example, the #box1 element is displayed as a block, meaning it takes up the full width of its container and each block-level element starts on a new line.
display: inline
The display: inline value makes an element an inline element. Inline elements do not start on a new line and only take up as much width as necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
#box2 {
display: inline; /* Inline display */
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
</body>
</html>In this example, the #box2 element is displayed as an inline element, meaning it does not start on a new line and only takes up the width of its content.
display: inline-block
The display: inline-block value combines features of both block and inline elements. Inline-block elements are laid out in a line, but they respect width and height properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
display: inline-block; /* Inline-block display */
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
</body>
</html>In this example, all .box elements are set to display: inline-block;, allowing them to be laid out in a line while respecting their specified width and height.
display: none
The display: none value hides an element completely, removing it from the document flow. The element will not take up any space on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
#box3 {
display: none; /* Hidden element */
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
</body>
</html>In this example, the #box3 element is hidden using display: none;, meaning it will not be visible on the page and will not take up any space.
Advanced display Values
display: flex
The display: flex value makes an element a flex container, allowing its children to be flex items. This enables flexible and responsive layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.container {
display: flex; /* Flex container display */
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>In this example, the .container class is set to display: flex;. The children of the flex container (.box elements) are laid out in a flexible manner, respecting the specified gap.
display: grid
The display: grid value makes an element a grid container, enabling a grid-based layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.grid-container {
display: grid; /* Grid container display */
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
width: 100%;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>In this example, the .grid-container class is set to display: grid;, and the grid-template-columns property defines three equal columns. The .box elements are laid out in a grid format.
display: inline-flex
The display: inline-flex value creates an inline flex container. This allows the container to be laid out inline with other elements while its children are flex items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.inline-flex-container {
display: inline-flex; /* Inline flex container display */
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="inline-flex-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>In this example, the .inline-flex-container class is set to display: inline-flex;. The container and its children (.box elements) are laid out inline while maintaining the flex properties.
display: inline-grid
The display: inline-grid value creates an inline grid container. This allows the container to be laid out inline with other elements while its children are grid items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.inline-grid-container {
display: inline-grid; /* Inline grid container display */
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
width: 100%;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="inline-grid-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>In this example, the .inline-grid-container class is set to display: inline-grid;. The container and its children (.box elements) are laid out inline while maintaining the grid properties.
display: table
The display: table value makes an element behave like a <table> element. This can be useful for creating table-like layouts without using HTML table elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.table-container {
display: table; /* Table display */
width: 100%;
}
.table-row {
display: table-row; /* Table row display */
}
.table-cell {
display: table-cell; /* Table cell display */
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="table-container">
<div class="table-row">
<div class="table-cell">Cell 1</div>
<div class="table-cell">Cell 2</div>
<div class="table-cell">Cell 3</div>
</div>
<div class="table-row">
<div class="table-cell">Cell 4</div>
<div class="table-cell">Cell 5</div>
<div class="table-cell">Cell 6</div>
</div>
</div>
</body>
</html>In this example, the .table-container class is set to display: table;, and its children (.table-row and .table-cell elements) are set to display: table-row; and display: table-cell; respectively. This creates a table-like layout using CSS.
display: list-item
The display: list-item value makes an element behave like a <li> element. This is useful for creating list-like items without using HTML list elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.list-item {
display: list-item; /* List item display */
list-style-type: disc;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="list-item">Item 1</div>
<div class="list-item">Item 2</div>
<div class="list-item">Item 3</div>
</body>
</html>In this example, the .list-item class is set to display: list-item;, making the elements behave like list items with bullets.
Combining with Other CSS Properties
The display property is often used in combination with other CSS properties to achieve specific design goals. Let’s see how to combine display with positioning properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.absolute-box {
display: block; /* Block display */
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="absolute-box">
Absolute Box
</div>
</body>
</html>In this example, the .absolute-box class sets the element to display: block; and uses the position: absolute; property to position the element 50 pixels from the top and left of its containing block. Combining display with positioning properties allows for precise control over the layout and placement of elements on the page.
Conclusion
The CSS display property is a versatile tool for controlling how elements are rendered on a webpage. By using different display values, web designers can create organized and visually appealing layouts, hide elements without removing them from the document flow, and optimize the user experience. Whether you’re creating simple block or inline layouts, or more complex flex and grid designs, the display property offers a wide range of possibilities.
Experimenting with different display values and combining them with other CSS properties helps in finding the perfect combination that suits the overall design theme of a website. The examples provided in this article serve as a foundation, encouraging further exploration and creativity in using the display property effectively.
