display Archives - Lena Design

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”:

Hi!

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…

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…

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…

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…

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…

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:

Some text…

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:

Some text…

Some text…Some text…

Some text…

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!

Some text…

Some text…some text…

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:

Some text…

Some text…Some text…

Some text…

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:

Some text…some text…

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:

Some text…

Some text…Some text…

Some text…