The display Property in CSS

The display property in CSS is one of the most important properties for controlling the layout of elements on a webpage. It determines how an element is displayed in the document and how it interacts with other elements. Here's a breakdown of the key values of the display property and how they affect elements:

1. display: block;

• Behavior: The element takes up the full width of its container and starts on a new line, pushing any following content to the next line.

• Common Block Elements: <div>, <h1>, <p>, <section>, <header>.

• Example:

  div {
    display: block;
  }
  

2. display: inline;

• Behavior: The element takes up only as much width as its content and does not start on a new line. Multiple inline elements can sit side by side.

• Common Inline Elements: <span>, <a>, <img>, <strong>.

• Example:

  span {
    display: inline;
  }
  

3. display: inline-block;

• Behavior: The element behaves like an inline element but allows you to set width, height, and margins/padding, which is not possible with purely inline elements.

• Use Case: Often used for creating buttons or small blocks within text that require specific sizing.

• Example:

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

4. display: none;

• Behavior: The element is completely removed from the document flow and does not take up any space. It’s as if the element does not exist in the DOM.

• Use Case: Useful for hiding elements without deleting them from the HTML.

• Example:

  .hidden {
    display: none;
  }
  

5. display: flex;

• Behavior: Enables a flex container, making it possible to align, justify, and distribute space among items within the container. Flexbox provides powerful layout control for responsive design.

• Use Case: Ideal for creating layouts that need to adapt to different screen sizes and content sizes.

• Example:

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

6. display: grid;

• Behavior: Enables a grid container, allowing for the creation of complex, two-dimensional layouts with rows and columns. Grid layout provides control over both horizontal and vertical alignment of items.

• Use Case: Ideal for more complex, multi-row, and multi-column layouts.

• Example:

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

7. display: table;

• Behavior: Makes an element behave like a <table> element. Often used in combination with display: table-row; and display: table-cell; to create table-like layouts without using actual table elements.

• Example:

  .table {
    display: table;
    width: 100%;
  }
  
  .row {
    display: table-row;
  }
  
  .cell {
    display: table-cell;
    padding: 10px;
  }
  

8. display: list-item;

• Behavior: The element behaves like a <li> element, creating a bullet or number in front of it.

• Use Case: Used for creating custom list items or making non-list elements behave like list items.

• Example:

  .custom-list-item {
    display: list-item;
    list-style-type: square;
  }
  

9. display: inline-flex;

• Behavior: Similar to display: flex;, but the container itself behaves like an inline element, not taking up the full width of its container.

• Example:

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

10. display: inline-grid;

• Behavior: Similar to display: grid;, but the container behaves like an inline element.

• Example:

  .inline-grid-container {
    display: inline-grid;
  }
  

11. display: contents;

• Behavior: The element itself is not rendered, but its children are. The element's box is not generated, and the children act as if they were directly in the parent element.

• Use Case: Useful when you want to avoid creating unnecessary boxes in the DOM.

• Example:

  .wrapper {
    display: contents;
  }
  

12. display: inherit;

• Behavior: The element inherits the display value from its parent element.

• Example:

  .child {
    display: inherit;
  }
  

Example Usage

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

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

.hidden {
  display: none;
}