CSS Display Property

The display property controls how an element is displayed and how it behaves in the layout.

Display Values

block: Takes full width, starts on new line (div, p, h1).

inline: Takes only needed width, no line break (span, a, strong).

inline-block: Inline but accepts width/height.

none: Removes element from layout entirely.

flex and grid: Modern layout systems.

/* Display values */
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
  width: 200px;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}