The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.
|inline||It is used to displays an element as an inline element.|
|block||It is used to displays an element as a block element|
|contents||It is used to disappear the container.|
|flex||It is used to display an element as a block-level flex container.|
|grid||It is used to display an element as a block-level grid container.|
|inline-block||It is used to display an element as a inline-level block container.|
|inline-flex||It is used to display an element as a inline-level flex container.|
|inline-grid||It is used to display an element as a inline-level grid container.|
|inline-table||It is used to display an inline-level table|
|list-item||It is used to display all the element in <li> element.|
|run-in||It is used to display an element inline or block level, depending on context.|
|table||It is used to set the behavior as <table> for all element.|
|table-caption||It is used to set the behavior as <caption> for all element.|
|table-column-group||It is used to set the behavior as <column> for all element.|
|table-footer-group||It is used to set the behavior as <header> for all element.|
|table-row-group||It is used to set the behavior as <row> for all element.|
|table-cell||It is used to set the behavior as <td> for all element.|
|table-column||It is used to set the behavior as <col> for all element.|
|table-row||It is used to set the behavior as <tr> for all element.|
|none||It is used to remove the element.|
|initial||It is used to set the default value.|
|inherit||It is used to inherit the property from it’s parents elements.|
Few important values are described below with the example.
Block: This property is used as the default property of div. This property places the div one after another vertically. Height and width of the div can be changed using the block property if the width is not mentioned, then div under block property will take up the width of the container.
Inline: This property is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.
Inline-block: This features uses the both properties mentioned above, block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of block. Basically, this will align the div both in block and inline fashion.
None: This property hides the div or the container which use this property. Using it on one of the div it will make working clear.
Supported Browsers: The browsers supported by Display property are listed below:
- Google Chrome 4.0
- Internet Explorer 8.0
- Firefox 3.0
- Opera 7.0
- Safari 3.1
- What is the difference between display: inline and display: inline-block in CSS?
- CSS | font-display property
- Display a Resized and Cropped Image using CSS
- Display div element on hovering over <a> tag using CSS
- Neon Text Display Using HTML & CSS
- Hide or show elements in HTML using display property
- Display Property in Bootstrap with Examples
- HTML | DOM Style display Property
- How Facebook Display Ads for something you searched
- How to display HTML tags as plain text using PHP
- How to xdebug var_dump to display full object/array ?
- How to display multiple horizontal images in Bootstrap card ?
- How do I get PHP errors to display?
- How to display bootstrap carousel with three post in each slide?
- How to display icon next to show/hide text on button?
- How to display search result of another page on same page using ajax in JSP?
- How to add `style=display:“block”` to an element using jQuery?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.