CSS Display

The display property in CSS specifies how an element is displayed in the document. It controls the layout behavior, visibility, and positioning of elements on a web page.

Display Values

Common display property values include:

• block: The element starts on a new line and takes up the full width.
• inline: The element does not start on a new line and only takes up as much width as necessary.
• inline-block: Behaves like inline but allows setting width and height.
• none: Hides the element completely.
• flex: Turns the element into a flex container for flexible layouts.
• grid: Turns the element into a grid container for advanced layouts.

Block Display

Block-level elements start on a new line and occupy the full width of their parent container.

div {
  display: block;
}

Inline Display

Inline elements flow with text and only take up as much width as needed.

span {
  display: inline;
}

Inline-Block Display

Inline-block elements behave like inline elements but allow setting width and height.

button {
  display: inline-block;
  width: 150px;
  height: 40px;
}

None Display

Setting display: none; hides an element completely from the page layout.

div.hidden {
  display: none;
}

Flex Display

Flexbox allows flexible layouts with alignment and spacing control.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid Display

CSS Grid allows creating complex layouts with rows and columns.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Best Practices for Display

• Use block for structural elements and inline for text-related elements
• Use flex and grid for modern, responsive layouts
• Avoid overusing display: none; for hiding elements that might need accessibility
• Combine display properties with other CSS properties like margin and padding for proper layout

Common Mistakes with Display

• Forgetting that inline elements cannot have width and height
• Misusing display: none; for visibility control instead of visibility: hidden;
• Overcomplicating layout without Flexbox or Grid when appropriate