CSS DisplayProperty
- Introduction to CSS display properties
- Value of CSS display property
- Example of CSS display property
Introduction to CSS Display Property
CSS provides you display property to control the display of HTML elements. Depending on the different values of this property, you can control the display of elements in many ways.
When you create a large web application, sometimes you need to control the display of some elements. There can have several reasons for this. For example, you want to show the same element that belongs to the content or to that particular page.
When you create a large web application, sometimes you need to control the display of some elements. There can have several reasons for this. For example, you want to show the same element that belongs to the content or to that particular page.
If you want to display elements that are not related to the content of a particular webpage then this will create a bad user experience. Whatever the reason, but all the web developers need to control the display of elements for good user experience.
Values of CSS Display Property
Some values of CSS display property have been given below.
- inline
- block
- inline-block
- list-item
- table
- none
- initial
- inherit
The general syntax of the display property has been given below.
display: value;
The default value of this property is inline.
Example of CSS display property
Now you can learn about each value of the display property with a simple example.
inline value of CSS display property
This is the default property of CSS display property. Elements from this "inline" value are displayed in the same line as an inline element. An example of this inline value of the display property has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline;
color: blue;
}
</style>
</head>
<body>
<div> This is first div element. </div>
<div> This is second div element. </div>
<img src = "image1.jpg" width = "50px" height = "50px"> </img>
<img src = "image2.jpg" width = "50px" height = "50px"> </img>
div {
display: inline;
color: blue;
}
</style>
</head>
<body>
<div> This is first div element. </div>
<div> This is second div element. </div>
<img src = "image1.jpg" width = "50px" height = "50px"> </img>
<img src = "image2.jpg" width = "50px" height = "50px"> </img>
</body>
</html>
The above script will generate the below output.
block value of CSS display property
When the value “block” of the CSS display property is defined, the elements are shown differently as block elements.
For example, when you create many links, all the links are shown in the same line. But if you want to show these links in different lines, you can do this by defining the display property with block value. By doing this, all links will be shown in different lines as block elements. An example of this display block value has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href=""> This is the First Link </a>
<a href=""> This is the Second Link </a>
<a href=""> This is the Third Link </a>
a {
display: block;
}
</style>
</head>
<body>
<a href=""> This is the First Link </a>
<a href=""> This is the Second Link </a>
<a href=""> This is the Third Link </a>
</body>
</html>
The above script will generate the below output.
inline-block value of CSS display property
Elements with this inline-block value show in the same line as inline elements but they are the block container.
For example, whenever a div element is created, the line break automatically adds to it before and after. But through this value, you can show many divs in the same line by override this behaviour. An example of this inline-block value has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div> This is Div1. </div>
<div> This is Div2. </div>
<div> This is Div3. </div>
<div> This is Div4. </div>
div {
display: inline-block;
}
</style>
</head>
<body>
<div> This is Div1. </div>
<div> This is Div2. </div>
<div> This is Div3. </div>
<div> This is Div4. </div>
</body>
</html>
The above script will show the below output.
list-item value of CSS display property
From this value, the element is shown as the item of a list. For example, if you want to show span elements as a list on the web page, then list item value of the display property can be used. An example of this list-item has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
display: list-item;
}
</style>
</head>
<body>
<span> LIST-ITEM ONE </span> <span> LIST-ITEM TWO </span> <span> LIST-ITEM THREE </span>
span {
color: blue;
display: list-item;
}
</style>
</head>
<body>
<span> LIST-ITEM ONE </span> <span> LIST-ITEM TWO </span> <span> LIST-ITEM THREE </span>
</body>
</html>
The above script generates the given output below.
table value of CSS display property
This value shows the element like a table. An example of a CSS display table value has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: table;
}
</style>
</head>
<body>
<span> ONE </span> <span> TWO </span> <span> THREE </span>
span {
display: table;
}
</style>
</head>
<body>
<span> ONE </span> <span> TWO </span> <span> THREE </span>
</body>
</html>
The above script will generate the below output.
none value of CSS display property
This value does not display element. This does not make any difference to the rest of the webpage designing. For example, if you want to hide all the divs on the web page, then such can be done by CSS display none value.
An example of this has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
</style>
</head>
<body>
<div> This will not div div. </div>
div {
display: none;
}
</style>
</head>
<body>
<div> This will not div div. </div>
</body>
</html>
The initial value of CSS display
This display initial value sets the default value of display property. An example of this has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: initial;
}
</style>
</head>
<body>
<div> FIRST ITEM </div> <img src = "image.jpg" width="100px" height="40px"> </img>
div {
display: initial;
}
</style>
</head>
<body>
<div> FIRST ITEM </div> <img src = "image.jpg" width="100px" height="40px"> </img>
</body>
</html>
The above script will generate the below output.
The inherit value of CSS display
When you set the "inherit" value of display property, the value of this property is taken from the parent element. An example of this has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: list-item;
}
span {
display: inherit;
}
</style>
</head>
<body>
<div>
<span> FIRST ITEM </span> <span> SECOND ITEM </span> <span> THIRD ITEM </span>
</div>
div {
display: list-item;
}
span {
display: inherit;
}
</style>
</head>
<body>
<div>
<span> FIRST ITEM </span> <span> SECOND ITEM </span> <span> THIRD ITEM </span>
</div>
</body>
</html>
The above script will generate the below output.
Hello there, just became alert to your blog through Google, and found that it's truly informative.
ReplyDeleteI?m going to watch out for brussels. I?ll be grateful if you continue
this in future. A lot of people will be benefited from your writing.
Cheers!