CSS Properties
CSS display Property
Photo Credit to CodeToFun
Introduction
The display
property in CSS is one of the most powerful and commonly used properties. It specifies the display behavior of an element, determining how an element is displayed on the web page.
The display
property can change an element's box type, enabling it to switch between being a block-level element, an inline element, or even not being displayed at all.
Syntax
The syntax for the display
property is simple and can be applied to any HTML element.
element {
display: value;
}
Default Value
The default value of the display
property depends on the HTML element. For example, the default value for a <div> element is block, while the default value for a <span> element is inline.
Property Values
Value | Description |
---|---|
block | The element generates a block-level box. |
inline | The element generates an inline-level box. |
inline-block | The element generates a block box that will be flowed with surrounding content as an inline box. |
none | The element is completely removed from the document flow and will not be displayed. |
flex | The element generates a block-level flex container box. |
inline-flex | The element generates an inline-level flex container box. |
grid | The element generates a block-level grid container box. |
inline-grid | The element generates an inline-level grid container box. |
table | The element generates a block-level table box. |
inline-table | The element generates an inline-level table box. |
list-item | The element generates a block-level box formatted as a list item. |
run-in | The element generates a block or inline box, depending on context. |
initial | Sets the property to its default value. |
inherit | Inherits the property value from its parent element. |
Example
In this example, we'll demonstrate the display
property by changing a block-level <div> to an inline element.
<!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-element {
display: block;
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}
.inline-element {
display: inline;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<h1>Display Property Example</h1>
<div class="block-element">I am a block element</div>
<div class="inline-element">I am an inline element</div>
</body>
</html>
Browser Compatibility
The display
property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental property in CSS, and its various values are widely recognized across different browser versions. Testing your website across different browsers is always recommended to ensure consistent behavior.
Conclusion
The display
property is an essential tool for web developers, providing control over how elements are rendered on a page.
By understanding and using the different values of the display
property, you can create complex and responsive layouts. Experiment with different display
values to see how they can affect the layout and presentation of your web projects.
Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS display Property), please comment here. I will help you immediately.