CSS display Property

You are Here:

CSS display Property

CSS display property specifies the display behavior of an element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> span{ display: none; } </style> </head> <body> <h1>CSS display: none;</h1> <p>This is paragraph. <span>This is span inside paragraph.</span></p> </body> </html>

Syntax

Using CSS

element{ display: inline-block; }

Using Javascript

object.style.display="inline-block";

Animatable

No, display property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS display property is depends on the element.

Property Value

The following table provides a list of values for CSS display property.

ValueExplanation
noneSpecifies that the element is completely removed (including space).
inlineSpecifies that the element is displayed as a inline element.
blockSpecifies that the element (<span>) is displayed as a block element (<p>). It starts on a new line, and takes up the width of 100%
contentsCauses an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.
flexSpecifies that the element is displayed as a block-level flex container.
gridSpecifies that the element is displayed as a block-level grid container.
inline-blockSpecifies that the element is displayed as an inline-level block container.
inline-flexSpecifies that the element is displayed as an inline-level flex container.
inline-gridSpecifies that the element is displayed as an inline-level grid container.
inline-tableSpecifies that the element is displayed as an inline-level table.
list-itemSpecifies that the element behave like a <li> element.
run-inSpecifies that the element will be displayed as a block or inline, depending on context.
tableSpecifies that the element behave like a <table> element.
table-captionSpecifies that the element behave like a <caption> element.
table-column-groupSpecifies that the element behave like a <colgroup> element.
table-header-groupSpecifies that the element behave like a <thead> element.
table-footer-groupSpecifies that the element behave like a <tfoot> element.
table-row-groupSpecifies that the element behave like a <tbody> element.
table-cellSpecifies that the element behave like a <td> element.
table-columnSpecifies that the element behave like a <col> element.
table-rowSpecifies that the element behave like a <tr> element.

Using JavaScript

In the following example, we will demonstrate how to change the CSS display property of an element using JavaScript.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS display Property</h1> <p>This is paragraph. <span>This is span inside paragraph.</span></p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("span")[0]; function myFunction(){ x.style.display = "none"; } </script> </body> </html>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author