What is the Display Property?
The display property defines how an HTML element is rendered on the page. By
default, each element has a specific display behavior based on its type:
Block Elements: Take up the full width and start on a new line.
Inline Elements: Take up only as much width as necessary and do not start on a new
line.
You can override these defaults using the display property to create custom
layouts.
Block-level Elements
A block-level element always starts on a new line and stretches to take up the full
width of its container.
Examples of block-level elements:
html
Copy code
<div>, <h1> to <h6>, <p>, <form>, <section>, <header>, <footer>
Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.
Examples of inline elements:
html
Copy code
<span>, <a>, <img>
Values for the Display Property
Here are some commonly used display values:
Value Description
inline Displays the element as an inline element.
block Displays the element as a block-level element.
inline-block Displays as inline-level but allows width and height to be set.
flex Makes the element a block-level flex container.
grid Makes the element a block-level grid container.
inline-flex Creates an inline flex container.
inline-grid Creates an inline grid container.
table Makes the element behave like a table.
none Hides the element entirely, removing it from the layout.
contents The container disappears, leaving only child elements in its place.
list-item Makes the element behave like a <li> (list item).
Practical Examples
Creating Inline List Items
Using display: inline to create horizontal menus:
css
Copy code
li {
display: inline;
}
Converting Inline Elements to Block
Make <span> or <a> behave like block elements:
css
Copy code
span, a {
display: block;
margin: 10px 0;
}
Flex Containers
Use display: flex to arrange children in a flexible layout:
css
Copy code
div {
display: flex;
justify-content: space-between;
}
Grid Containers
Use display: grid for a grid-based layout:
css
Copy code
div {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Hiding Elements
Using display: none
Hides the element entirely, and it does not occupy any space:
css
Copy code
.hidden {
display: none;
}
Using visibility: hidden
Hides the element, but it still occupies space in the layout:
css
Copy code
.hidden {
visibility: hidden;
}
Difference: display: none vs visibility: hidden
Property Effect
display: none The element is removed from the document flow and takes up no
space.
visibility: hidden The element is invisible but still occupies space in the
document flow.
Override Default Display Values
Example 1: Converting <li> to Inline for Horizontal Menus
css
Copy code
li {
display: inline;
}
Example 2: Using inline-block for Centering
css
Copy code
div {
display: inline-block;
text-align: center;
}
Conclusion
The display property is a powerful CSS tool for controlling how elements appear and
interact within a layout. By mastering its values, you can create everything from
basic layouts to complex designs with grids, flexboxes, and custom behaviors.
