In the world of CSS, the display property is like a magician’s wand, capable of transforming elements and dictating how they behave on the stage of your web page. With its various keyword values, you can control the flow, visibility, and positioning of elements with finesse.
Syntax
The syntax for the display property is straightforward. You assign a value to it, like this:
1 |
selector { |
2 |
display: value; |
3 |
}
|
The default value for display depends on the element. For example, most block-level elements have a default value of display: block, while most inline-level elements default to display: inline. This property applies to almost all HTML elements, except for some that have a predefined display value.
It’s important to note that the display property is not inherited by child elements. Each element must be given its own display value. Also, keep in mind that CSS animations can be applied to elements that have a display property assigned to them, although the display property itself cannot be animated.
Example
Use the dropdown to toggle the display value of the div:
Keyword Values
Now, let’s explore the various keyword values available for the display property. Each keyword comes with a unique set of behaviors and quirks. Let’s bring them on stage, one by one:
block
The block keyword transforms an element into a stylish diva, claiming its own horizontal space. It creates a new line before and after the element, ensuring that no other elements share the same line. Here’s an example:
1 |
.selector { |
2 |
display: block; |
3 |
}
|
inline
When you want an element to behave like a humble team player, the inline keyword is your go-to choice. It doesn’t start a new line and instead allows other elements to happily reside on the same line. For example:
1 |
.selector { |
2 |
display: inline; |
3 |
}
|
inline-block
The inline-block keyword combines the best of both worlds, like a talented actor who can switch between the lead role and supporting character. It maintains its inline nature while allowing width, height, margins, and padding to be applied. Here’s an example:
1 |
.selector { |
2 |
display: inline-block; |
3 |
}
|
none
The none keyword is like a magician’s sleight of hand, making an element completely disappear from the stage. The element becomes invisible, as if it was never there. Poof! For instance:
1 |
.selector { |
2 |
display: none; |
3 |
}
|
flex
The flex keyword is a master of choreography, enabling elements to dance harmoniously within their container. It creates a flexible box layout, allowing you to distribute space and align items with elegance. Here’s a snippet to show you the moves:
1 |
.selector { |
2 |
display: flex; |
3 |
}
|
grid
The grid keyword is the conductor of an orchestra, arranging elements in a grid-based layout. It grants you the power to define rows, columns, and the placement of elements, creating a symphony of content. For example:
1 |
.selector { |
2 |
display: grid; |
3 |
}
|
table
The table keyword value is part of the CSS Table Layout module and is used to create table-like layouts without actually using HTML <table> elements. When you apply display: table to an element, it triggers a table context for that element and its children.
- Its children elements are automatically treated as table cells.
- By default, table cells will be displayed in a row layout, one after another.
- You can control the layout further by applying
display: table-rowto an element to define a new table row, anddisplay: table-cellto an element to define a table cell within a row.
1 |
.selector { |
2 |
display: table; |
3 |
}
|
list-item
The list-item value is used to style an element as a list item. It is primarily used in conjunction with the <li> element within an ordered <ol> or unordered <ul> list. When an element has display: list-item, it gains the characteristics of a list item, such as the bullet or number marker and indentation.
1 |
.selector { |
2 |
display: list-item; |
3 |
list-style-type: disc; /* Specifies bullet marker */ |
4 |
}
|
flow (Experimental)
Imagine a river gently flowing, carrying elements smoothly as it meanders through the page. The experimental flow keyword aims to bring this natural flow to
your elements, providing flexibility and responsiveness. It’s still an experimental value and not commonly used yet. Keep an eye on its development! For example:
1 |
.selector { |
2 |
display: flow; |
3 |
}
|
ruby (Experimental)
The ruby keyword pays homage to the graceful art of ruby annotations, where annotations accompany the main text. This experimental value allows you to create beautiful ruby text annotations for East Asian typography. It’s a niche feature and not commonly used yet, but worth exploring for specific language needs. For example:
1 |
.selector { |
2 |
display: ruby; |
3 |
}
|
Learn More
The display property affects the box model of elements. Different display values can alter how the width, height, margin, padding, and borders of an element are calculated. So, choose your display value wisely, as it can have a significant impact on the layout and appearance of your elements!
“The
displayproperty is like a Swiss Army knife for web layout. It offers a variety of tools to shape and structure your content. Embrace its power and explore the endless possibilities it provides!” - Chris Coyier
Relevant Tutorials
To deepen your understanding of the display property and unlock its full potential, here are some relevant tutorials:
Official Specification and Browser Compatibility
That concludes our adventure through the mesmerizing world of the CSS display property. May your layouts be elegant, your elements well-positioned, and your web pages visually captivating. Happy coding!
By
