display property
The display property defines how a element must be show on the page.
| value | description | ||
| none | Hides a element and all its descendants so that it has no effect on layout. For example, <script> element. | ||
| block | Shows element as block. By default, element will fill parent by width, and wrap content by height. Line breaks will be generated before and after of the element. So sequence of elements will be have vertical linear layout.
| ||
| inline | Shows element like a text string. It will try wrap content first by horizontal direction, then vertical direction. All this means, that you can't assign size of element and vertical margins/padding. No line breaks generated. So next element will be on same line if there is space. If in the html code between elements at least one line break or space, then white space will be rendered between elements.
| ||
| list-item | The element behaves like a block element and can show list item marker. | ||
| flex | The element behaves like a block element and lays out its content according to the flexbox model. | ||
| grid | The element behaves like a block element and lays out its content according to the grid model. | ||
| inline-block | The element behaves like a block element without generating line breaks. This means you can assign size of element and vertical margins/paddings and next non-block element will be on same line if there is space. For example, <input> element. | ||
| inline-flex | The element behaves like a inline element and lays out its content according to the flexbox model. | ||
| inline-grid | The element behaves like a inline element and lays out its content according to the grid model. | ||
| inline-table | The element behaves like a inline <table> element. | ||
| table* | There are some values thats behaves like corresponding table elements
|