CSS display
property specifies how an element should be displayed on the web page. Whether the element should be displayed on a new line or in the same line of the text or not displayed at all can easily be controlled using the display property.
In this CSS tutorial we will discuss everything about the display
property in detail. So let’s get started:
Type of Elements
Based on the CSS display
property, the HTML elements can be categorized into two types:
- Block Level Elements
- Inline Elements
Let’s discuss each type in detail:
The Block Level Elements
The block-level elements always start on a new line and take up the full width of their parent element. The block-level elements have a default value block
of the display
property.
The <p>
element below takes up the full width of its parent element as it’s a block-level element.
This <p> element is a block-level element.
Examples of the block-level elements:
<div>
<p>
<h1>
–<h6>
<ul>
<ol>
<hr>
The Inline Elements
Unlike the block-level elements, an inline element does not start on a new line. Rather, it is placed according to the normal flow of the layout and takes up only the necessary width. This means that we can place multiple inline elements on the same line.
The inline elements have a default value inline
of the display
property.
This is an inline <span> element inside a <p> element
Examples of the inline elements:
<span>
<a>
<img>
<button>
<strong>
Changing the Default Display Value
As we have discussed above, every element has a default display value. Some elements have a default display value block
while others have a default display value inline
.
We can however change these default display values. This means, If an element is of type block, we can force it to behave like an inline element by changing its default value. See the example below:
Example:
h1{ display: inline; }
In the similar way, we can force inline elements to behave like block-level elements. See the example below:
Example:
span{ display: block; }
The Display Inline-block
There is one more interesting value of the display
property, the inline-block
. The inline-block toggles between the inline and block values.
An element having display: inline-block;
behaves like an inline element if enough space is available. If enough space is not available, it behaves as a block-level element and moves to a new line.
You can see the difference between the inline, inline-block and block-level elements in the example below:
Example:
.inline{ display: inline; } .inline-block{ display: inline-block; } .block{ display: block; }
The Display None
The display: none;
property is used to hide an element.
When we set the display
property to none
, It completely removes the element from the layout. See the example below:
Example:
.hidden{ display: none; }
You can also use the visibility: hidden;
to hide an element. However, the element is not removed from the layout, it just becomes invisible and takes up the same space as earlier. See the example below:
Example:
.hidden{ visibility: hidden; }
Hide an element – display: none; vs visibility: hidden;
Click on the remove and hide buttons in the below images to understand the difference between the display: none;
and visibility: hidden;
.


