- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Property Using in CSS
All HTML elements have a default value set for their CSS Display property. This property specifies how will the element be rendered in the document.
NOTE − Default display property can be overridden but that does not change the type of the element just its display behavior on the document.
Following are some of the values for the CSS Display property −
- Block
- Inline
- Inline-Block
- None
Example
Let’s see an example of CSS Display property −
<!DOCTYPE html> <html> <head> <title>CSS Display</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: block; /*default value for <div>*/ height: 40px; width: 100%; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
Output
This will produce the following output −
Example
Let’s see another example of CSS Display property −
<!DOCTYPE html> <html> <head> <title>CSS Display</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ height: 40px; color: white; border: 4px solid black; display: inline; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> </body> </html>
Output
This will produce the following output −
- Related Articles
- Working with CSS Display Property
- Display None Using in CSS
- Display Block using CSS
- Display Inline using CSS
- Display Inline-Block using CSS
- CSS Latest Updates - Inner & Outer Values of display Property
- Using CSS z-index property
- Changing the Default Display Value using CSS
- Center alignment using the margin property in CSS
- Aligning elements using the position property in CSS
- Stacking Elements in Layers using z-index Property using CSS
- Display an Icon from Image Sprite using CSS
- Align elements using the CSS float property
- Display None in CSS
- Who to Change the Default Display Value using CSS

Advertisements