Display Property Values
| Display Values | Description | Default Tags | Example Usage |
|---|---|---|---|
| block | Generates a block-level element that starts on a new line and takes up the full width available.It has Height and Width properties available. | , , to
|
display: block; |
| inline | Generates an inline element that flows within the text and does not start on a new line. It has NO Height and Width properties available. It simply fills up needed space. | , , , , |
display: inline; |
| inline-block | Generates an inline-block element that combines properties of inline and block elements. Has inline behavior but has Height and Width properties available as well. | display: inline-block; |
|
| flex | Creates a flex container that provides powerful one-dimensional layout control. | See Flex Tutorial Next to learn more | display: flex; justify-content: center; align-items: center; |
| grid | Creates a grid container that offers versatile two-dimensional layout control. | See Grid Tutorial Next to learn more | display: grid; plus others |
| none | Hides the element from the page layout entirely. It occupies no space and is not rendered. | This element is hidden. | display: None; |