CSS display Property

❮ Previous Reference Next ❯

Example

p.example1 {
  display: none;
}

p.example2 {
  display: inline;
}

p.example3 {
  display: block;
}

p.example4 {
  display: inline-block;
}





Hello World!

Meaning

The display property specifies an element’s display type and can override an element’s defined presentation.

Default value:inline
Inherited:No
Animatable:No
Version:CSS1
JavaScript syntax:
object.style.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|revert|revert-layer|unset";



Standard 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|revert|revert-layer|unset;



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Property Values

The following table describes the values of this property.

Value Description
inline The element generates an inline-level box.
block The element generates a block-level box.
contents The element itself does not generate any boxes, but its children and pseudo-elements generate boxes and text runs as normal.
flex The element generates a block-level flex container box.
flow The element lays out its contents using flow layout (block-and-inline layout).
flow-root The element generates a block container box, and lays out its contents using flow layout.
grid The element generates a block-level grid container box.
inline-block The element generates a block box that's laid out as if it were an inline box.
inline-flex The element generates an inline-level flex container box.
inline-grid The element generates an inline-level grid container box.
inline-table The element behaves like a table that,s laid out as if it were an inline box.
list-item The element generates a block box for the content and a separate inline box for the list marker.
run-in The element generates either a block or an inline box, depending on the context.
table The element behaves like the <table> HTML element.
table-caption The element behaves like the <caption> HTML element.
table-column-group The element behaves like the <colgroup> HTML elements.
table-header-group The element behaves like the <thead> HTML elements.
table-footer-group The element behaves like the <tfoot> HTML elements.
table-row-group The element behaves like the <tbody> HTML elements.
table-cell The element behaves like the <td> HTML elements.
table-column The element behaves like the <col> HTML elements.
table-row The element behaves like the <tr> HTML elements.
none Turn off the display of an element. All child elements also have their display turned off, even if their display property is set to something other than none.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  display: inline;
}
❮ Previous Reference Next ❯