Display: block, inline, inline-block, none

Controlling How Elements Participate in Layout

The display property is the most important property in CSS for layout. It determines whether an element generates a block box, an inline box, or something else entirely.

• block — takes the full available width, starts on a new line. <div>, <p>, <h1>–<h6> default to this.
• inline — only as wide as its content, sits in the text flow. <span>, <a>, <strong> default to this. Width and height have no effect.
• inline-block — sits in the text flow like inline, but respects width, height, padding, and margin like block.
• none — removes the element entirely from the layout (it takes up no space).

/* Make list items sit side by side */
.nav li {
  display: inline-block;
  margin-right: 1rem;
}

/* Hide an element while keeping it in the DOM */
.hidden {
  display: none;
}

/* Make a <span> behave like a block */
.badge {
  display: block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #6366f1;
  color: #fff;
}

visibility vs display:none

visibility: hidden hides an element visually but it still takes up space in the layout. display: none removes it from layout entirely. Use visibility: hidden when you want to hide content without the layout shifting.