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; |