About Lesson
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. | <div>, <p>, <h1> to <h6>, <ul>, <li>, <section>, etc. | 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. | <span>, <a>, <strong>, <em>, <img>, <input>, <button>, etc. | 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. | <label>, <select>, <textarea>, <img>, etc. | 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; |