In this article, We will learn about the Display Property in CSS.

The Display Property is the most important property in CSS as it controls the layout of the webpage.

It defines that how an element will be displayed on the webpage.

The HTML elements have a default display value depending upon the type of element it is.

Generally, the default values of the display property of HTML elements are block and inline.

Syntax of Display property in CSS:

display: value;

Display Property’s values

S.No.	Value	Description
1.	inline	Used to displays an element as an inline element (like span).
2.	block	Used to displays an element as a block element (like p).
3.	contents	Used to disappear the container.
4.	flex	Used to display an element as a block-level flex container.
5.	grid	Used to display an element as a block-level grid container.
6.	inline-block	Used to display an element as an inline-level block container.
7.	inline-flex	Used to display an element as an inline-level flex container.
8.	inline-grid	Used to display an element as an inline-level grid container.
9.	inline-table	Used to display an inline-level table.
10.	list-item	Used to display all the elements in <li> element.
11.	run-in	Used to display an element inline or block level, depending on the context.
12.	table	Used to set the behavior as <table> for all elements.
13.	table-caption	Used to set the behavior as <caption> for all elements.
14.	table-column-group	Used to set the behavior as <column> for all elements.
15.	table-header-group	Used to set the behavior as <header> for all elements.
16.	table-footer-group	Used to set the behavior as <footer> for all elements.
17.	table-row-group	Used to set the behavior as <row> for all elements.
18.	table-cell	Used to set the behavior as <td> for all elements.
19.	table-column	Used to set the behavior as <col> for all elements.
20.	table-row	Used to set the behavior as <tr> for all elements.
21.	none	Used to remove the element.
22.	initial	Used to set the default value.
23.	inherit	Used to inherit the property from its parents’ elements.

Some Important Values that are been used widely are described below:

Block

The block property is used to display an element as a block element that starts with a new line and covers the entire length of the line from left to right.

We can also set and change the width of the block element.

Some Block-level elements are:

<div>	<figure>	<table>	<hr>	<blockquote>	<fieldset>
<main>	<noscript>	<tfoot>	<pre>	<canvas>	<figcaption>
<header>	<address>	<nav>	<p>	<dd>	<form>
<footer>	<video>	<ul>	<li>	<dl>	<h1>-<h6>
<article>	<section>	<ol>	<aside>	<dt>

For Example:

#container1 {
             display: block;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: block;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: block;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

Inline

The inline element neither starts with a new line nor takes the entire length of the line. It starts from the point where the previous element ended and occupies the minimum space that is required.

We cannot control the width of inline elements.

Some Inline elements are :

<span>	<img>	<object>	<sup>	<input>	<b>
<select>	<br>	<var>	<time>	<cite>	<small>
<button>	<map>	<a>	<abbr>	<kbd>	<dfn>
<i>	<acronym>	<output>	<textarea>	<em>	<strong>
<samp>	<sub>	<script>	<label>	<bdo><big>	<code>

For Example:

#container1 {
             display: inline;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: inline;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: inline;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

Inline-block

This display property is the combination of both inline and block display properties.

It occupies the minimum space that is required but we can also change its width.

For Example:

#container1 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #ffffa0;
             }

#container2 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #ffa0ff;
             }

#container3 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #a0ffff;
             }

Output:

None

This display property hides the element which uses this property.

Generally, it is used with JavaScript to hide and show elements without actually deleting or recreating the element.

For Example:

#container1 {
             display: block;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: none;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: block;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

That’s all about the Display Property in CSS.

Hope this article will guide you to recognize all about the Display Property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.