CSS Display Types

What is display in CSS?

The display property defines how an element is displayed on the page — whether it takes up the whole line, can sit next to others, or behaves like a container.

CSS Display Types

1. display: block

• Takes up the full width.
• Starts on a new line.
• You can set width, height, margin, padding.

div, p, h1 {
  display: block;
}

2. display: inline

• Sits next to other elements.
• Ignores width and height.
• Respects padding and margin only horizontally.

span, a, strong {
  display: inline;
}

3. display: inline-block

• Like inline, but respects width and height.
• Best of both: flows inline, but can be styled like a block.

.button {
  display: inline-block;
  width: 100px;
  height: 30px;
}

4. display: none

• Completely hides the element from the page (not even space left behind).

.hidden {
  display: none;
}

5. display: flex

• Turns the element into a flex container.
• Great for layouts, aligning items horizontally or vertically.

.container {
  display: flex;
}

6. display: grid

• Turns the element into a grid container.
• Useful for creating 2D layouts (rows and columns).

.grid {
  display: grid;
}

7. display: inline-flex / inline-grid

• Same as flex or grid, but behaves like an inline element.

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