2018-10-12 19:37:13 +00:00
---
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:
```css
.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:**
```css
.myBox {
2018-12-13 05:03:03 +00:00
display: block;
2018-10-12 19:37:13 +00:00
}
.myContainer {
2018-12-13 05:03:03 +00:00
display: flex;
2018-10-12 19:37:13 +00:00
}
.inlineList ul > li {
2018-12-13 05:03:03 +00:00
display: inline;
2018-10-12 19:37:13 +00:00
}
```
#### More Information:
* Documentation and full list of keyword values: [MDN ](https://developer.mozilla.org/en-US/docs/Web/CSS/display )
* The W3Schools CSS reference on the display property is available: [W3Schools ](https://www.w3schools.com/cssref/pr_class_display.asp )
* CSS-TRICKS has a great reference on the display property: [CSS-Tricks ](https://css-tricks.com/almanac/properties/d/display/ )
* Browser Support: [caniuse ](http://caniuse.com/#search=display )
* A Complete Guide to Flexbox: [CSS-Tricks ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )