The CSS Display property is used to set how the element is displayed on a web page. Some of its values are displayed here −
Sr.no | Property Value | Description |
---|---|---|
1 | inline | Displays an element as an inline element. |
2 | block | Displays an element as a block element. |
3 | contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM |
4 | flex | Displays an element as a block-level flex container |
5 | grid | Displays an element as a block-level grid container |
6 | inline-block | Displays an element as an inline-level block container. |
7 | inline-flex | Displays an element as an inline-level flex container |
8 | inline-grid | Displays an element as an inline-level grid container |
9 | inline-table | The element is displayed as an inline-level table |
Example
Let us now see an example to implement the CSS display property −
<!DOCTYPE html> <html> <head> <style> span { background-color: orange; color: white; } p.demo { display: none; } span.demo1 { display: inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div> <div> Match will end at <span class="demo1">5PM</span> on 20th December. </div> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: block; } p.demo2 { display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019. </div> <div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div> </body> </html>