Display Property in CSS – Tutorial

The display property in CSS is one of the most fundamental and powerful tools for controlling how elements appear and behave in the layout of a webpage. It determines how elements are visually represented and interact with surrounding elements.

Common Display Values

1. block

• The element takes up the full width available.

• Starts on a new line.

• Examples: <div>, <p>, <h1>

.display-block {
  display: block;
}

2. inline

• The element only takes up as much width as necessary.

• Does not start on a new line.

• Examples: <span>, <a>, <strong>

.display-inline {
  display: inline;
}

3. inline-block

• Behaves like inline in terms of layout (does not break line), but allows width and height to be set.

.display-inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
}

4. none

• Completely removes the element from the layout.

• The space the element would have taken is also removed.

.hidden-element {
  display: none;
}

5. flex

• Enables Flexbox layout for better alignment, spacing, and responsive design.

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

6. grid

• Enables CSS Grid layout for two-dimensional design.

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

When to Use Each

• Use block for structural elements.

• Use inline for small, embedded elements like links.

• Use inline-block when you need size control on inline elements.

• Use flex or grid for layout purposes, especially in modern responsive designs.

• Use none to hide elements conditionally (e.g., via JavaScript or media queries).

Helpful Tips

• Combine display with position, width, and height for advanced layouts.

• Use browser dev tools to inspect the computed display type of any element.

• Modern frameworks (like Bootstrap, Tailwind) use utility classes based on display values.

Conclusion

Mastering the display property is essential for any web developer. Whether you’re building simple layouts or complex responsive interfaces, understanding how display works will help you control how elements behave on your page effectively.