The CSS display property is one of the most important properties in your CSS toolbox. It controls the layout of elements in relation to their siblings and parent elements and can impact the flow of your content.
Understanding Display Types
There are four main types of display property in CSS: none, inline, block, and inline-block.
| Display Type | Description |
|---|---|
| None | The element does not display at all |
| Inline | The element displays inline with other content |
| Block | The element displays as a block, with a new line before and after |
| Inline-Block | The element displays inline with other content, but has block properties |
Display: None
When you set an element's display property to none, it completely removes the element from the page. This can be useful for hiding content.
.element {
display: none;
}Display: Inline
An inline element does not start on a new line and it only takes up as much width as necessary. This is the default value of many HTML elements, like <span> and <img>.
.element {
display: inline;
}Display: Block
A block element starts on a new line and takes up the full width available. Elements like <div> and <h1> are block-level elements.
.element {
display: block;
}Display: Inline-Block
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
.element {
display: inline-block;
}Understanding how the CSS display property works is a fundamental aspect of mastering CSS and creating professional, polished layouts.
