In this section, we will learn what the display property is and how to use it in CSS.
Click here to run the example of display property.
CSS display Property Definition and Usage
CSS provided a property named `display` by which we can turn an inline element into block-level and vice versa.
Also, with the help of this property, we can hide an element from a webpage.
CSS display Property Syntax
display: value;
CSS display Property Value
Here are the values that can be set for this property:
- inline: using this value, the target element becomes an inline-level element.
- block: using this value, the target element becomes a block-level element.
- none: this value will cause the element to be hidden in the page.
There are other values that can be set for this property although rarely used, but it’s good to know them:
- contents: Using this value, it’ll hide the target element and make its child elements to be the children of the hidden element’s parent.
- inline-table: this value makes the target element to behave like inline-level table
- list-item: this value makes the target element to behave like <li> element
- run-in: depending on the context, this value makes the target element to become either an inline or block-level element.
- table: this value makes the target element to behave like <table> element.
- table-caption: this value makes the target element to behave like <caption> element
- table-column-group: this value makes the target element to behave like <colgroup> element
- table-header-group: this value makes the target element to behave like <thead> element
- table-footer-group: this value makes the target element to behave like <tfoot> element
- table-row-group: this value makes the target element to behave like <tbody> element
- table-cell: this value makes the target element to behave like <td> element
- table-column: this value makes the target element to behave like <col> element
- table-row: this value makes the target element to behave like <tr> element.
Example: display block in CSS
See the Pen display block in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: inline block in CSS
See the Pen inline block in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
