In this video i will talk about Display Property in CSS

The display property specifies the display behavior (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.



1. inline: Displays an element as an inline element (like span). Any height and width properties will have no effect

2. block: Displays an element as a block element (like p). It starts on a new line, and takes up the whole width

3.contents: Makes the container disappear, making the child elements children of the element the next level up in the DOM

4.flex: Displays an element as a block-level flex container

5.grid: Displays an element as a block-level grid container

6.inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

7.inline-flex: Displays an element as an inline-level flex container

8.inline-grid: Displays an element as an inline-level grid container

9.inline-table: The element is displayed as an inline-level table

10.list-item: Let the element behave like a li element

11.run-in: Displays an element as either block or inline, depending on context

12.table: Let the element behave like a table element

13.table-caption: Let the element behave like a caption element

14.table-column-group: Let the element behave like a colgroup element

15.table-header-group: Let the element behave like a thead element

16.table-footer-group: Let the element behave like a tfoot element

17.table-row-group: Let the element behave like a tbody element

18.table-cell: Let the element behave like a td element

19.table-column: Let the element behave like a col element

20.table-row: Let the element behave like a tr element

21.none: The element is completely removed

22.initial: Sets this property to its default value. Read about initial

23.inherit: Inherits this property from its parent element. Read about inherit