CSS display Property

CSS's Display property specifies how the components (div, hyperlink, heading, etc.) will be placed on the web page. This property, as the name implies, is used to define how different parts of a web page are displayed.

Syntax

display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    p {color: #ff4842;}

    .ex1 {display: none;}
    .ex2 {display: inline;}
    .ex3 {display: block;}
    .ex4 {display: inline-block;}
</style>
</head>
<body>

<h2>display: none</h2>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">Webtutor</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline</h2>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">Webtutor</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block</h2>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">Webtutor</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block</h2>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">Webtutor</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

Preview

Property Values

Value	Description
inline	Displays an element as an inline element. Any height or width properties will be ignored.
block	Displays an element as a block element. It begins on a new line and spans the entire width.
contents	The container is removed, and the child elements of the element at the next level up in the DOM are replaced.
flex	An element is displayed as a block-level flex container.
grid	An element is displayed as a block-level grid container.
inline-block	An element is displayed as an inline-level block container. The element is formatted as an inline element, but height and width values can be specified.
inline-flex	An element is displayed as an inline-level flex container.
inline-grid	An element is displayed as an inline-level grid container.
inline-table	The element is displayed as a table at the inline level.
list-item	Allow the element to behave similarly to a <li> element.
run-in	Depending on the context, displays an element as a block or inline.
table	Allow the element to behave similarly to a <table> element.
table-caption	Allow the element to behave similarly to a <caption> element.
table-column-group	Allow the element to behave similarly to a <colgroup> element.
table-header-group	Allow the element to behave similarly to a <thead> element.
table-footer-group	Allow the element to behave similarly to a <tfoot> element.
table-row-group	Allow the element to behave similarly to a <tbody> element.
table-cell	Allow the element to behave similarly to a <td> element.
table-column	Allow the element to behave similarly to a <col> element.
table-row	Allow the element to behave similarly to a <tr> element.
none	The element has been completely eliminated.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
display	4.0	3.0	3.1	8.0	7.0

direction

empty-cells

CSS display Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us