Introduction to CSS display property
The CSS display property stipulates an element’s display behavior. In simple terms, this property describes in CSS how components like div, hyperlink, heading, etc., should be put on the web page. As the name implies, such property will be used to describe the view of the different sections of a web page.
Explicitly, the display property determines the types of internal and external display for an element. The outer type aims to set the participation of an element in the flow layout; the inner type wants to set the children’s layout. In addition, several other display values are properly defined with their own specifics.
Syntax and Parameters of CSS display property
The syntax for display property in CSS can be written as shown below:
display: value;
Following are the parameters which are used by the display property:
- inline: An element will be used to show it as an inline element.
- block: It is used to view an element as a block element.
- contents: It removes the container.
- flex: This is used to view an element as a flex container at the block level.
- grid: This is used to view an element as a grid container at the block level.
- inline-block: This is used to view an element as a block container at the inline level.
- inline-flex: This is used to view an element as a flex container at the inline level.
- inline-grid: This is used to view an element as a grid container at the inline level.
- list-item: It is used to show all elements in < li > element.
- table: This is used to define the behavior for all elements as < table >.
- table-caption: For all elements the behavior is set as < caption >.
- table-column-group: For all elements the behavior is set as < column >.
- table-header-group: For all elements, the behavior is set as < header >.
- table-footer-group: For all elements, the behavior is set as < footer >.
- table-row-group: For all elements, the behavior is set as < row >.
- table-cell: For all elements, the behavior is set as < td >.
- table-column: For all elements, the behavior is set as < col >.
- table-row: For all elements, the behavior is set as < tr >.
- none: It is used to eliminate the element.
- initial: It is used to place the default value.
- inherit: It inherits the elements from the parent’s elements.
For instance,
p {
display: inline;
}
How display property work in CSS?
- The default display property value in HTML is taken from the HTML standards or from the default style sheet of the browser/user.
- The CSS display values which create behavior of block-level elements are block, list-item, table.
- The block-level elements provide vertically different document lines, with a line break before and after the document.
- HTML elements such as < div >, < p >, < h1 >, < h2 >, among others, traditionally display block actions.
Examples of CSS display property
Given below are the examples of CSS display property:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Display Property Example </title>
<style>
.main {
margin:30px;
text-align:center;
}
#para1{
height: 120px;
width: 180px;
background: darksalmon;
display: block;
}
#para2{
height: 120px;
width: 180px;
background: olive;
display: block;
}
#para3{
height: 120px;
width: 180px;
background: fuchsia;
display: block;
}
</style>
</head>
<body>
<h2> Display Block Example </h2>
<br>
<div class = "main">
<div id="para1"> Java is a highly object-oriented, platform-independent and secure programming language. </div>
<div id="para2"> Python is widely used, popular, high level, interpreted general-purpose programming language. </div>
<div id="para3"> HTML is abbreviated as Hyper Text Mark up Language the most expanded language used worldwide to display the result in the web pages.</div>
</div>
</body>
</html>
Output:
In the above example, we are using block property to display the element in the block structure. This property positions the div one after the other vertically. Using the block property, the height and width of the div can be altered if the width is not described, then the div under block property would then occupy the container width. Therefore, the three div blocks will be defined with specified color along with specified height and width attributes.
4.5 (8,706 ratings)
View Course
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Display Property Example </title>
<style>
.main {
margin:30px;
}
#para1{
background: darksalmon;
display: inline;
}
#para2{
background: olive;
display: inline;
}
#para3{
background: fuchsia;
display: inline;
}
</style>
</head>
<body>
<h2> Display Inline Example </h2>
<br>
<div class = "main">
<div id="para1"> Java </div>
<div id="para2"> HTML </div>
<div id="para3"> CSS </div>
</div>
</body>
</html>
Output:
In the above example, we use inline property values, which display the inline structure. In addition, it places the elements in a horizontal manner. This property ignores the height and the width set by the user.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Display Property Example </title>
<style>
.main {
margin:30px;
}
#para1{
height: 120px;
width: 180px;
background: darksalmon;
display: inline-block;
}
#para2{
height: 120px;
width: 180px;
background: olive;
display: inline-block;
}
#para3{
height: 120px;
width: 180px;
background: fuchsia;
display: inline-block;
}
</style>
</head>
<body>
<h2> Display Inline-block Example </h2>
<br>
<div class = "main">
<div id="para1"> Inline-block Element1 </div>
<div id="para2"> Inline-block Element2 </div>
<div id="para3"> Inline-block Element3 </div>
</div>
</body>
</html>
Output:
In the above example, we have used the inline-block property to create the block box in the same line and set the div element’s height and width. Therefore, the created block element will be treated as an inline box.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Display Property Example </title>
<style>
body {
display: inline;
}
p {
display: inherit;
color: red;
}
</style>
</head>
<body>
<h2> Display Inherit Example </h2>
<br>
<p> EDUCBA is a leading global provider of skill based education. </p>
<p> It is online learning model along with amazing 2500+ courses. </p>
</body>
</html>
Output:
In the above example, we have used the inherit property, which is inheriting the property from the parent element. To make use of this property, we have set the body to inline property, which brings the both paragraphs in one line.
Conclusion
So far, we saw display property, one of the most important and effective properties in the CSS. This can be very helpful to make web pages that look different and yet still meet the web standards. The web page recognizes each HTML item as a box, and with the display property, and we decide how certain boxes are displayed or whether they are to be shown or hidden.
Recommended Articles
This is a guide to CSS display property. Here we discuss the introduction, how display property works in CSS? Along with examples. You may also have a look at the following articles to learn more –
