1.6 KiB
1.6 KiB
| title |
|---|
| CSS Display |
CSS Display
The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. 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}
The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist. This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.
These keyword values are grouped into six categories:
<display-inside><display-outside><display-listitem><display-box><display-internal><display-legacy>