When working with CSS, the display property plays a crucial role in determining how an element is rendered on the page. It defines the type of rendering box an element generates and how it interacts with other elements around it. In this article, we will explore the various values of the display property, explain their behaviors, and show practical examples to help you understand how and when to use them.
What is the display Property?
The display property in CSS specifies the display behavior of an element. It defines the type of box an element generates, which in turn determines how it interacts with other elements in the layout. By default, every HTML element has a predefined display value that determines whether it’s a block-level element, an inline element, or something else.
Key Values of the display Property
The display property can take several values, each of which affects how an element is displayed. Let’s dive into the most common ones.
1. block
A block-level element occupies the full width available, and it always starts on a new line. Elements with the block display are stacked vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Example</title>
<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="block-element">This is a block element.</div>
<div class="block-element">This is another block element.</div>
</body>
</html>
In this example, both <div> elements are block-level elements, so they stack vertically and take up the full width of their container.
2. inline
Inline elements only take up as much width as necessary for their content. They do not break onto a new line and are displayed next to other inline elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Example</title>
<style>
.inline-element {
display: inline;
background-color: lightgreen;
padding: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<span class="inline-element">Inline Element 1</span>
<span class="inline-element">Inline Element 2</span>
</body>
</html>
In this example, the <span> elements are inline. They appear next to each other on the same line without breaking the flow of text.
3. inline-block
The inline-block value combines the characteristics of both block and inline elements. It allows elements to sit next to each other, but unlike inline elements, they can have width and height values applied.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline-block Example</title>
<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightcoral;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="inline-block-element">Box 1</div>
<div class="inline-block-element">Box 2</div>
</body>
</html>
Here, the two <div> elements behave like inline elements by sitting next to each other. However, they also maintain the ability to accept width and height styles, as seen in the example.
4. none
The none value completely removes an element from the document flow. It is as if the element does not exist on the page, and it doesn’t take up any space. It’s commonly used when you need to hide an element without deleting it from the DOM.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>None Example</title>
<style>
.hidden-element {
display: none;
}
</style>
</head>
<body>
<div>This is visible.</div>
<div class="hidden-element">This is hidden.</div>
<div>This is visible again.</div>
</body>
</html>
In this case, the second <div> element is hidden from the page because of the display: none; rule. The content remains in the HTML code but is not rendered on the screen.
5. flex
The flex value enables the use of the Flexbox layout model. It is used on a container to distribute space along a row or column, and its child elements can be flex items. Flexbox allows for more flexible and dynamic layouts compared to block or inline.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Example</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: lightgray;
padding: 20px;
}
.flex-item {
background-color: lightblue;
padding: 20px;
width: 30%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
With display: flex; on the container, the child elements are aligned in a row, and the space between them is evenly distributed using justify-content: space-between;.
6. grid
The grid value activates the CSS Grid layout. It allows you to create complex, two-dimensional grid layouts for both rows and columns. It provides precise control over the positioning of elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 20px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
Here, the grid container creates three equal-width columns with grid-template-columns: repeat(3, 1fr);. The elements are placed in the grid, and there is a 10px gap between each item.
Conclusion
The display property is an essential part of CSS that influences how elements are rendered and interact with other elements on a webpage. By understanding the key values of the display property, such as block, inline, inline-block, flex, grid, and none, you can create more sophisticated and responsive layouts.
Whether you’re building simple layouts or complex grids, mastering the display property is crucial for effective web design. Use the examples provided as a starting point and experiment with different display values to create beautiful, functional web pages.