CSS Display Property
Learn about the fundamental CSS `display` property and how it controls the layout behavior of elements.
Understanding the Display Property
The CSS **`display`** property is one of the most important properties for controlling the layout of elements on a webpage. It defines how an element is rendered and how it interacts with other elements in terms of space and flow. Every HTML element has a default `display` value, but you can override it with CSS to achieve different layout behaviors.
Understanding `display` is crucial for effective page structuring and responsive design, as it dictates whether an element takes up an entire line, flows alongside other elements, or behaves as a flexible container.
📝 Key Concept
The display property dictates an element's type of display box. This box type determines how the element's width, height, and content layout are handled, and how it interacts with its siblings.
Common `display` Values
There are several `display` values, but the most commonly used ones are `block`, `inline`, and `inline-block`. Modern CSS also introduces `flex` and `grid` for more advanced layout systems.
display: block;
Block-level elements always start on a new line and take up the full available width by default. They respect `width`, `height`, `margin`, and `padding` properties. Examples include `
`, `
` - ``, and ``.
<!-- HTML -->
<div class="block-element">Block Element 1</div>
<div class="block-element">Block Element 2</div>
/* CSS */
.block-element {
background-color: var(--primary-color);
color: white;
margin: 10px 0;
padding: 15px;
width: 200px; /* You can set width */
}
Example: Block Elements
Block Element 1
Block Element 2 (different width)
display: inline;
Inline elements do not start on a new line and only take up as much width as their content requires. They do not respect `width`, `height`, `margin-top`, or `margin-bottom` (though `margin-left` and `margin-right` work). `padding` works horizontally but can cause overlap issues vertically. Examples include ``, ``, ``, ``.
<!-- HTML -->
<span class="inline-element">Inline Text 1</span>
<span class="inline-element">Inline Text 2</span>
/* CSS */
.inline-element {
background-color: var(--secondary-color);
color: white;
margin: 5px; /* Top/bottom margin won't apply */
padding: 5px 10px;
}
Example: Inline Elements
Inline Text 1
Inline Text 2
This is some surrounding text to show inline behavior.
display: inline-block;
Inline-block elements combine features of both inline and block elements. They flow horizontally like inline elements but respect `width`, `height`, `margin`, and `padding` properties like block elements. They do not force a new line after them. This makes them useful for creating grid-like layouts with more control than pure inline elements.
<!-- HTML -->
<div class="inline-block-element">Item A</div>
<div class="inline-block-element">Item B</div>
<div class="inline-block-element">Item C</div>
/* CSS */
.inline-block-element {
display: inline-block;
background-color: var(--accent-color);
color: white;
width: 100px;
height: 80px;
margin: 10px;
padding: 10px;
text-align: center;
line-height: 60px; /* Vertically center text */
}
Example: Inline-Block Elements
Item A
Item B
Item C
Advanced `display` Values: `flex` and `grid`
Beyond the basic block and inline behaviors, CSS introduced `flex` and `grid` to revolutionize complex layout creation.
display: flex;
Turns an element into a **flex container**, enabling its direct children to become **flex items** that can be laid out along a single axis (row or column). This is ideal for component-level layouts, navigation menus, or aligning items within a section.
.flex-container {
display: flex;
justify-content: space-around; /* Distribute space between items */
align-items: center; /* Vertically center items */
height: 100px;
background-color: var(--bg-tertiary);
padding: 10px;
}
display: grid;
Turns an element into a **grid container**, enabling its direct children to become **grid items** that can be laid out in two dimensions (rows AND columns). This is powerful for page-level layouts or complex UI structures.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
gap: 10px;
background-color: var(--bg-tertiary);
padding: 10px;
}
We will delve deeper into Flexbox and Grid in their respective dedicated topics!
display: none; and Visibility
Setting `display: none;` completely removes an element from the document flow. It won't take up any space, and it will be invisible. This is different from `visibility: hidden;`, which makes an element invisible but still reserves its space in the layout.
.hidden-element {
display: none; /* Element completely removed from layout */
}
.invisible-element {
visibility: hidden; /* Element still takes up space but is not visible */
}
💡 Tip
Use display: none; when you want to completely remove an element from rendering and layout calculations. Use visibility: hidden; if you want to hide an element but keep its space reserved in the layout.
- `.
<!-- HTML --> <div class="block-element">Block Element 1</div> <div class="block-element">Block Element 2</div> /* CSS */ .block-element { background-color: var(--primary-color); color: white; margin: 10px 0; padding: 15px; width: 200px; /* You can set width */ }
display: inline;
Inline elements do not start on a new line and only take up as much width as their content requires. They do not respect `width`, `height`, `margin-top`, or `margin-bottom` (though `margin-left` and `margin-right` work). `padding` works horizontally but can cause overlap issues vertically. Examples include ``, ``, ``, ``.
<!-- HTML --> <span class="inline-element">Inline Text 1</span> <span class="inline-element">Inline Text 2</span> /* CSS */ .inline-element { background-color: var(--secondary-color); color: white; margin: 5px; /* Top/bottom margin won't apply */ padding: 5px 10px; }
display: inline-block;
Inline-block elements combine features of both inline and block elements. They flow horizontally like inline elements but respect `width`, `height`, `margin`, and `padding` properties like block elements. They do not force a new line after them. This makes them useful for creating grid-like layouts with more control than pure inline elements.
<!-- HTML --> <div class="inline-block-element">Item A</div> <div class="inline-block-element">Item B</div> <div class="inline-block-element">Item C</div> /* CSS */ .inline-block-element { display: inline-block; background-color: var(--accent-color); color: white; width: 100px; height: 80px; margin: 10px; padding: 10px; text-align: center; line-height: 60px; /* Vertically center text */ }
Advanced `display` Values: `flex` and `grid`
Beyond the basic block and inline behaviors, CSS introduced `flex` and `grid` to revolutionize complex layout creation.
display: flex;
Turns an element into a **flex container**, enabling its direct children to become **flex items** that can be laid out along a single axis (row or column). This is ideal for component-level layouts, navigation menus, or aligning items within a section.
.flex-container { display: flex; justify-content: space-around; /* Distribute space between items */ align-items: center; /* Vertically center items */ height: 100px; background-color: var(--bg-tertiary); padding: 10px; }
display: grid;
Turns an element into a **grid container**, enabling its direct children to become **grid items** that can be laid out in two dimensions (rows AND columns). This is powerful for page-level layouts or complex UI structures.
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ gap: 10px; background-color: var(--bg-tertiary); padding: 10px; }
We will delve deeper into Flexbox and Grid in their respective dedicated topics!
display: none; and Visibility
Setting `display: none;` completely removes an element from the document flow. It won't take up any space, and it will be invisible. This is different from `visibility: hidden;`, which makes an element invisible but still reserves its space in the layout.
.hidden-element { display: none; /* Element completely removed from layout */ } .invisible-element { visibility: hidden; /* Element still takes up space but is not visible */ }
💡 Tip
Use display: none; when you want to completely remove an element from rendering and layout calculations. Use visibility: hidden; if you want to hide an element but keep its space reserved in the layout.