What is Display Property?
- Display property specifies the display behavior or the type of an element.
- The display property sets an element's inner and outer display types.
- The Display property defines how the components will be placed on the web page.
This will be our boilerplate and we will use different classes in the class attribute in span tag.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Display Property in CSS </title>
<style>
</style>
</head>
<body>
<div>
<p>
This is the CSS Master Series at Geeks Help by <span class=""> raju_webdev </span>
</p>
</div>
</body>
</html>
Different display values with output
i) inline - It is used to display an element as an inline element.
.inline {
display: inline;
border: 1px solid red;
}
ii) block - It is used to display an element as a block element.
.block {
display: block;
border: 1px solid red;
}
iii) flex - It is used to display an element as a block-level flex container.
.flex {
display: flex;
border: 1px solid red;
}
iv) grid- It is used to display an element as a block-level grid container.
.grid {
display: grid;
border: 1px solid red;
}
v) inline-block - It is used to display an element as an inline-level block container.
.inline-block {
display: inline-block;
border: 1px solid red;
}
vi) inline-flex- It is used to display an element as an inline-level flex container.
.inline-flex {
display: inline-flex;
border: 1px solid red;
}
vii) inline-grid - It is used to display an element as an inline-level grid container.
.inline-grid {
display: inline-grid;
border: 1px solid red;
}
viii) block-grid- It is used to display an element as a block-level grid container.
.block-grid {
display: block-grid;
border: 1px solid red;
}
ix) none - It is used to remove the element.
.none {
display: none;
border: 1px solid red;
}
x) table - Let the element behave like a <table> element.
.table {
display: table;
border: 1px solid red;
}
xi) initial - It is used to set the default value.
.initial {
display: initial;
border: 1px solid red;
}
xii) inherit - It is used to inherit the property from its parent's elements.
.inherit {
display: inherit;
border: 1px solid red;
}
xiii) table-cell - It is used to set the behavior as <td> for all elements.
.table-cell {
display: table-cell;
border: 1px solid red;
}
xiv) table-column - It is used to set the behavior as <col> for all elements.
.table-column {
display: table-column;
border: 1px solid red;
}
Using Display Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Display Property in CSS </title>
<style>
.container {
display: flex;
border: 1px solid orangered;
}
.container-item {
border: 1px solid blue;
padding: 1rem;
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="container-item"> This is first continer item </div>
<div class="container-item"> This is second container item </div>
<div class="container-item"> This is third container item </div>
</div>
</body>
</html>
Output:
CSS Display Property Part-11 PDF
Download Now
