CSS Display

The display property in CSS is used to define how an element is displayed on a web page. It determines the layout behavior of an element. This property controls the inner and outer display types of an element, affecting how it is rendered in the document flow and how it interacts with other elements.

property values

1. display: none

This not only hides the element but also removes it from the document flow, meaning it won’t take up any space.

Syntax:-

.container {
  display: none;
}

2. display: block

The element is displayed as a block element (like <div>). It will take up the full width available and start on a new line.

Syntax:

.element-block {
  display: block;
}

3. display: inline

The element is displayed as an inline element (like <span>). It will take up only as much width as necessary and will not start on a new line.

Syntax:

.inline-element{
  display: inline;
}

4. display: inline-block

The element is displayed as an inline element, but it can have width and height like a block element.

Syntax:

.inline-element{
  display: inline-block;
}

5. display: flex

The element is displayed as a block-level flex container. It enables the use of the flexible box layout model.

Syntax:

.flex-container{
  display: flex;
}

6. display: inline-flex

The element is displayed as an inline-level flex container.

Syntax:

.flex-inline-container{
  display: inline-flex;
}

7. display: grid

The element is displayed as a block-level grid container. It enables the use of the grid layout model.

Syntax:

.grid-container {
  display: grid;
}

8. display: inline-grid

The element is displayed as an inline-level grid container.

Syntax:

.grid-inline-container {
  display: inline-grid;
}

9. display: table

The element is displayed as a block-level table (like <table>).

Syntax:

.table-container {
  display: table;
}

10. inline-table

The element is displayed as an inline-level table.

Syntax:

.table-inline-container {
  display: inline-table;
}

11. table-row and table-cell

These values display the element as a table row, table cell, and so on.

Syntax:

.table-row{
  display: table-row;
}
.table-cell{
  display: table-cell;
}

12. display: list-item

he element is displayed as a list item (like <li>).

Syntax:

.list-item-container {
  display: list-item;
}

13. display: contents

The element itself is not displayed, but its child elements are displayed as if they were direct children of the element’s parent.

Syntax:

.content-container {
  display: contents;
}

CSS Display – Interview Questions

CSS Display – Objective Questions (MCQs)

Related CSS Display Topics