CSS display Property

The CSS display Property is used to control how an HTML Element is displayed on the web page.

Here is a syntax of an CSS display Property.

Syntax:

display: value;

Here is the list of all the possible values that a display property can take, along with their description.

Value	Description
inline	This value is used to display an element as an inline element.
block	This value sets an html element as a block level element.
inline-block	Pretty much similar to inline, but it allows us to set width and height of an element.
flex	This value is used to display an element as a block-level flex container.
grid	This property value is used to display an element as a block-level grid container.
none	This value hides the element completely from the layout.
table	This value makes the element behave like a table, and you can use table-related properties like `table-row`, `table-cell`, etc.
inline-table	Similar to `table`, but it behaves like an inline-level box with the features of a table.
list-item	This value displays the element as a list item, typically used with `<li>` elements within lists.
inherit	his value allows the element to inherit the `display` value from its parent element.

CSS `display: block;`

This CSS display: block; property makes the element a block-level box. That means it will take up the entire width available and another element will start on a new line. This property value is the default value of div element and many other elements.

CSS `display: inline;`

This CSS display: inline; property makes the element an inline element. That means it will take up only the sufficient width that it required and another element will start on a same line. This property value is the default value of span element and many other elements.

CSS `display: inline-block;`

This property is pretty much similar to inline, the only difference is that you can set the height and width of the block, by using this property value.

To understand it practically, let’s write a code in an example below where we create two div elements, and set display: inline; property to one div element and display: inline-block; to other div element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#blockA {
	display: inline;
        background-color: powderblue;  
}
#blockB {
	display:inline-block;
        background-color:crimson;
        height:100px;
        width:140px;
}
</style>
</head>
<body>
<h2> CSS display: inline-block Property</h2>
<div id = "blockA"> This is a Block A</div>
<div id = "blockB"> This is a Block B</div>
</body>
</html>

Copy the Code and Run it Here

If you try to set height and width on blockA, where the property is display: inline;, it will not set the height and width of the block. Run this code on our code editor and try to set height and width on blockA to clear your doubts about display: inline; and display: inline-block; property.

CSS `display: none;`

This property is used to hide the element which use this property. Here is an example:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#blockA {
	display: block;
        background-color: powderblue;  
}
#blockB {
        display: none;
        background-color: cyan;
}
#blockC {
	display: block;
        background-color:dodgerblue;
}
</style>
</head>
<body>
<h2> CSS display: none; Property</h2>
<!--Here we set the display: none; property on blockB-->
<div id = "blockA"> This is a Block A</div>
<div id = "blockB"> This is a Block B</div>
<div id = "blockC"> This is a Block C</div>
</body>
</html>

Copy the Code and Run it Here

CSS display: none; Property

This is a Block A

is a Block B

This is a Block C

Here you can see that blockB, where we add the display; none property is not visible.

CSS `display: table;`

The CSS display: table; property is used to control the display behavior of an element, as if it were a table element. When you set an element’s display property to table, it behaves similarly to an HTML <table> element, and you can use additional properties to create table-like layouts.

CSS `display: inherit;`

The display inherit property is used to inherit the display value of an element from it’s parent element. When you apply display: inherit; to an element, it takes on the same display value as its nearest parent element that has a defined display property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#a {
    background-color:cyan;
    display: inline;
    
}
#b {
    background-color: powderblue;
    display: inherit;
}
</style>
</head>
<body>
<h2>CSS display: inherit; Property</h2>
<div id="a"> This is a paragraph</div>
<div id="b"> This paragraph will inherit the display value from his parent</div>
</body>
</html>

Copy the Code and Run it Here

Example Explained

In an above example the div element with id "b", inherits the display value from the div element with id "a".

CSS `display: list-item;`

The CSS display: list-item; property is used to display an element as a list item, similar to the behavior of HTML list items <li> within an ordered (<ol>) or unordered (<ul>) list. When you apply display: list-item; to an element, it generates a marker before the element’s content, which represents a list item.

Previous

Next

Share This Post!

CSS display Property