The CSS display property defines the display behaviour (the type of rendering box) of an element.
Syntax:
display: value;Demo:
Click the “Try it” button to set the display property of the DIV element to “none”:
none – the element is completely removed.
display: none;block – displays an element as a block element. It starts on a new line and takes up the whole width.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #333;
}
.text {
display: block;
}
</style>
</head>
<body>
<div class="square">
<p class="text">Some text...</p>
<p class="text">Some text...</p>
<p class="text">Some text...</p>
</div>
</body>
</html>Output:
Some text…
Some text…
Some text…
inline – displays an element as an inline element. Height and width properties will have no effect.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
position: relative;
height: 200px;
border: 2px solid #333;
}
.text {
display: inline;
}
</style>
</head>
<body>
<div class="square">
<p class="text">Some text...</p>
<p class="text">Some text...</p>
<p class="text">Some text...</p>
</div>
</body>
</html>Output:
Some text…
Some text…
Some text…
contents – causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself.
display: contents;flex – displays an element as a block-level flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
position: relative;
height: 200px;
display: flex;
border: 2px solid #333;
justify-content: center;
align-items: center;
}
.text {
width: 70px;
}
</style>
</head>
<body>
<div class="square">
<p class="text">Some text...</p>
<p class="text">Some text...</p>
<p class="text">Some text...</p>
</div>
</body>
</html>
Outline:
Some text…
Some text…
Some text…
grid – displays an element as a block-level grid container.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
background-color: #2a9d8f;
padding: 5px;
}
.grid-item {
background-color: #e9c46a;
border: 2px solid #333;
padding: 10px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
Output:
inline-block – displays an element as an inline-level block container (you can apply height and width values).
<!DOCTYPE html>
<html>
<head>
<style>
.square {
position: relative;
height: 200px;
border: 2px solid #333;
}
.text {
display: inline-block;
width: 70px;
}
</style>
</head>
<body>
<div class="square">
<p class="text">Some text...</p>
<p class="text">Some text...</p>
<p class="text">Some text...</p>
</div>
</body>
</html>Outline:
Some text…
Some text…
Some text…
inline-flex – displays an element as an inline-level flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
position: relative;
height: 200px;
display: inline-flex;
border: 2px solid #333;
justify-content: center;
align-items: center;
}
.text {
width: 70px;
}
</style>
</head>
<body>
<div class="square">
<p class="text">Some text...</p>
<p class="text">Some text...</p>
<p class="text">Some text...</p>
</div>
</body>
</html>
Output:
Some text…
Some text…
Some text…
inline-grid – displays an element as an inline-level grid container.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container2 {
display: inline-grid;
grid-template-columns: auto auto;
background-color: #2a9d8f;
padding: 5px;
}
.grid-item2 {
background-color: #e9c46a;
border: 2px solid #333;
padding: 10px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container2">
<div class="grid-item2">1</div>
<div class="grid-item2">2</div>
<div class="grid-item2">3</div>
<div class="grid-item2">4</div>
</div>
</body>
</html>Output:
inline-table – the element is displayed as an inline-level table.
<!DOCTYPE html>
<html>
<head>
<style>
.example {
display: inline-table;
border: 2px solid #333;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="example">
<img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg">
<p>Ghost</p>
</div>
</body>
</html>Output:
Ghost
list-item – let the element behave like a li element.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
display: list-item;
list-style-position: inside;
}
</style>
</head>
<body>
<div class="one">Some text...</div>
</body>
</html>Output:
run-in – displays an element as either block or inline, depending on context.
display: run-in;table – let the element behave like a table element.
<!DOCTYPE html>
<html>
<head>
<style>
.col {
border: 1px solid #333;
padding:2px;
}
</style>
</head>
<body>
<div class="table" style="display: table; border: 2px solid #333;">
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
</div>
</body>
</html>Output:
table-caption – let the element behave like a caption element.
<html>
<body>
<div style="display:table;">
<h4 style="display: table-caption; height: 20px; background-color: #fefae0;margin:0; padding:10px;">Hello!</h4>
<div style="display: table-cell;width: 20%;background-color: #ccd5ae;" >Some text...</div>
<div style="display: table-cell;width: 80%;background-color: #faedcd;">Some text...some text...</div>
</div>
</body>
</html>Output:
Hello!
table-column-group – let the element behave like a colgroup element.
display: table-column-group;table-header-group – let the element behave like a thead element.
display: table-header-group;table-footer-group – let the element behave like a tfoot element.
display: table-footer-group;table-row-group – let the element behave like a tbody element.
display: table-row-group;table-cell – let the element behave like a td element.
<!DOCTYPE html>
<html>
<head>
<style>
.col {
border: 1px solid #333;
padding:2px;
}
</style>
</head>
<body>
<div class="table" style="display: table; border: 2px solid #333;">
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
</div>
</body>
</html>Output:
table-column – let the element behave like a col element.
<!DOCTYPE html>
<html>
<head>
<style>
.example-table {
display: table;
}
.row-1 {
display: table-row;
}
.cell-example {
display: table-cell;
}
.column-1 {
display: table-column;
background-color: #ccd5ae;
}
.column-2 {
display: table-column;
background-color: #faedcd;
}
</style>
</head>
<body>
<div class="example-table">
<div class="column-1"></div>
<div class="column-2"></div>
<div class="row-1">
<div class="cell-example">Some text...some text...</div>
<div class="cell-example">Some text...some text...</div>
</div>
<div class="row-1">
<div class="cell-example">Some text...some text...</div>
<div class="cell-example">Some text...some text...</div>
</div>
</div>
</body>
</html>Output:
table-row – let the element behave like a tr element.
<!DOCTYPE html>
<html>
<head>
<style>
.col {
border: 1px solid #333;
padding:2px;
}
</style>
</head>
<body>
<div class="table" style="display: table; border: 2px solid #333;">
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
<div class="row" style="display: table-row;">
<div class="col" style="display: table-cell;">Some text...Some text...</div>
<div class="col" style="display: table-cell;">Some text...</div>
</div>
</div>
</body>
</html>Output:
Read also: