CSS Display Property

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;.

display: none;
visibility: hidden;
Reset

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment