freeCodeCamp/guide/english/css/layout/display-property/index.md

title
Display Property

Display Property

The display property specifies the type of box used for an HTML element. There are 20 total keyword values, although only 10 are used commonly. The commonly used ones are:

.none           {display: none}
.block          {display: block}
.inline-block   {display: inline-block}
.inline         {display: inline}
.flex           {display: flex}
.inline-flex    {display: inline-flex}
.inline-table   {display: inline-table}
.table          {display: table}
.inherit        {display: inherit}
.initial        {display: initial}

Common Examples:

.myBox {
    display: block;
}

.myContainer {
    display: flex;
}

.inlineList ul > li {
    display: inline;
}

More Information:

• Documentation and full list of keyword values: MDN

• The W3Schools CSS reference on the display property is available: W3Schools

• CSS-TRICKS has a great reference on the display property: CSS-Tricks

• Browser Support: caniuse

• A Complete Guide to Flexbox: CSS-Tricks