Search within TutorialsPark

CSS display Property


To define the type of box used to display a webpage element


Definition and Notes.

1. The CSS display property defines the kind of box an element generates when it is laid out on the webpage

2.CSS treats all elements as boxes, there are two main types of boxes inline and block.

block : Elements of this type always begins on a new line and occupies all horizontal available space on that line, pushing all successive elements to the next line.

inline : Elements of this type occupies space in-between the previous and succesive elements.And does not begin on a new line


Syntax:

CSS display property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-A value of none is used to make the element 'disappear', very usefull for dynamic elements like drop-down lists .

Property Values

Value Description
inline To display the element as an inline-level auto
block To display the element as a block-level block
list-item To display the element as a block-level block list-item
inline-list-item To display the element as an inline-level block list-item
inline-block To display the element as an inline-level block
table To display the element as a block-level table
inline-table To display the element as an inline-level table
table-caption To display the element as a table-caption block
table-cell To display the element as a table-cell block
flex To display the element as a block-level flex
inline-flex To display the element as an inline-level flex
grid To display the element as a block-level grid
inline-grid To display the element as an inline-level grid

Specifications

Specs Value
Name display
Value inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | [<display-inside> || <display-outside> || <display-box> || <display-extra> ]
Initial Value See Individual Properties
Applies to All elements
Javascript syntax object.style.display="block"
Inherited no
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.