The CSS display property determines how an HTML element is rendered and how it participates in the page layout.

A block element starts on a new line and normally occupies the available horizontal space.

.box {
  display: block;
  width: 250px;
  padding: 20px;
  background: #1769d5;
  color: white;
}

Inline elements remain on the same line whenever enough horizontal space is available.

.box {
  display: inline;
  background: #1769d5;
  color: white;
}

Inline-block elements stay beside each other while allowing width, height, padding and margin to be applied.

.box {
  display: inline-block;
  width: 180px;
  height: 100px;
  padding: 20px;
  margin: 10px;
}

display: none; removes the element from the page layout. It does not reserve any space.

.hidden {
  display: none;
}

Unlike display: none, visibility hidden makes an element invisible while preserving its original layout space.

.hidden {
  visibility: hidden;
}

Flexbox is useful for arranging elements in rows or columns and controlling alignment and spacing.

.container {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

CSS Grid allows you to create rows and columns and is ideal for structured page layouts.

.container {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 15px;
}