Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Working with CSS Display Property
The CSS Display property is used to set how the element is displayed on a web page. With this property, create a grid layout, a flex, inline, etc. 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 |
Display inline
The inline value displays an element as an inline element −
span.demo1 {
display: inline;
}
Example
Let us 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>
Display block and inline-block
In this example, we have set display block and inline-block. The inline-block displays an element as an inline-level block container. The block displays an element as a block element −
p.demo1 {
display: block;
}
p.demo2 {
display: inline-block;
}
Example
Let us now see the 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 December, 2019.
</div>
<div>
Match will end at <p class="demo2">5PM</p> on 19th December, 2019.
</div>
</body>
</html>
Display grid
In this example, create a grid layout with display grid −
display: grid;
We will create a three-column grid layout with the 1st row set 100px. For this, the grid-template layout is used to set a three-column layout −
grid-template: 100px / auto auto auto;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: 100px / auto auto auto;
grid-gap: 5px;
background-color: blue;
padding: 5px;
}
.grid-container > div {
background-color: orange;
text-align: center;
padding: 5px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="item1">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
<div class="item8">723</div>
<div class="item9">811</div>
</div>
</body>
</html>
115 Views
