The CSS display property determines how an element is displayed on a webpage, defining its layout behavior and how it interacts with other elements around it.
Understanding the display property is one of the most critical concepts for mastering CSS layouts.
Syntax:
element {
display: value;
}
The display property controls the box type generated by an element, affecting its positioning and behavior within the document flow. Let's look at the most common values.
This is the default property for elements like <div>, <p>, and <h1>. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). You can easily adjust the height and width of a block-level element.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 60px;
width: 200px;
color: white;
text-align: center;
line-height: 60px;
margin-bottom: 5px;
}
.box-1 {
background: navy;
display: block;
}
.box-2 {
background: lightblue;
color: navy;
display: block;
}
.box-3 {
background: lightcoral;
display: block;
}
</style>
</head>
<body>
<h3>Block Elements (Stack vertically)</h3>
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
</body>
</html>
Use this property to display an element inline (this is the default for elements like <span> and <a>). It doesn’t start a new line and respects the content flow, only taking up as much width as necessary.
Important: You cannot set a specific width or height on an inline element!
<!DOCTYPE html>
<html>
<head>
<style>
.inline-box {
height: 100px; /* This will be ignored! */
width: 200px; /* This will be ignored! */
color: white;
padding: 10px;
}
.box-1 {
background: navy;
display: inline;
}
.box-2 {
background: lightblue;
color: navy;
display: inline;
}
.box-3 {
background: lightcoral;
display: inline;
}
</style>
</head>
<body>
<h3>Inline Elements (Flow horizontally)</h3>
<div class="inline-box box-1">Box 1</div>
<div class="inline-box box-2">Box 2</div>
<div class="inline-box box-3">Box 3</div>
</body>
</html>
Combining characteristics of both block and inline, this value allows elements to flow inline (side-by-side) while still allowing you to set specific width and height properties. It’s incredibly useful for creating responsive grid layouts without modern tools.
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block-box {
height: 60px; /* Width and Height work now! */
width: 100px;
color: white;
text-align: center;
line-height: 60px;
}
.box-1 {
background: navy;
display: inline-block;
}
.box-2 {
background: lightblue;
color: navy;
display: inline-block;
}
.box-3 {
background: lightcoral;
display: inline-block;
}
</style>
</head>
<body>
<h3>Inline-Block Elements (Flow horizontally, respect sizing)</h3>
<div class="inline-block-box box-1">Box 1</div>
<div class="inline-block-box box-2">Box 2</div>
<div class="inline-block-box box-3">Box 3</div>
</body>
</html>
This property hides the element completely. The element will not be displayed, and the page will be rendered as if the element does not exist (it frees up the space it would have occupied).
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 60px;
width: 200px;
color: white;
text-align: center;
line-height: 60px;
margin-bottom: 5px;
}
.box-1 {
background: navy;
display: block;
}
.box-2 {
background: lightblue;
display: none; /* This hides Box 2 completely! */
}
.box-3 {
background: lightcoral;
display: block;
}
</style>
</head>
<body>
<h3>Display None (Box 2 is missing!)</h3>
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
</body>
</html>
Flexbox and Grid are modern CSS layout systems used to create flexible and structured layouts with ease.
display: flex;): Best for one-dimensional layouts (arranging items in a single row or a single column).display: grid;): Ideal for two-dimensional layouts (arranging items in both rows and columns simultaneously).CSS provides a wide variety of display values for different structural needs. Here is a comprehensive reference table:
| Value | Description |
|---|---|
inline |
Displays an element as an inline element (like <span>). |
block |
Displays an element as a block element (like <div>). |
inline-block |
Displays an element as an inline-level block container. |
none |
Removes the element completely from the document flow. |
flex |
Displays an element as a block-level flex container. |
inline-flex |
Displays an element as an inline-level flex container. |
grid |
Displays an element as a block-level grid container. |
inline-grid |
Displays an element as an inline-level grid container. |
contents |
Makes the container disappear, making child elements children of the element the next level up in the DOM. |
table |
Sets the behavior to act like a <table> for all elements. |
inline-table |
Displays an inline-level table. |
table-row |
Sets the behavior to act like a <tr> (table row). |
table-cell |
Sets the behavior to act like a <td> (table cell). |
table-caption |
Sets the behavior to act like a <caption>. |
table-column |
Sets the behavior to act like a <col>. |
table-row-group |
Sets the behavior to act like a <tbody>. |
table-header-group |
Sets the behavior to act like a <thead>. |
table-footer-group |
Sets the behavior to act like a <tfoot>. |
table-column-group |
Sets the behavior to act like a <colgroup>. |
list-item |
Displays an element exactly like an <li> element. |
run-in |
Displays an element inline or block level, depending on the context. |
initial |
Sets this property to its default value. |
inherit |
Inherits this property from its parent element. |
Which display value allows elements to sit side-by-side on the same line, but still allows you to set specific width and height properties?