CSS Display

Subject: css

CSS Display

The display property in CSS controls how an HTML element is rendered in the layout. It defines whether the element behaves like a block, inline, or a more advanced layout system like flex or grid.

Understanding the display property is essential for structuring layouts, aligning content, and building responsive designs.

Common display Values

  • block: Displays the element as a block (takes full width)
  • inline: Displays inline, without line breaks
  • inline-block: Inline positioning with block-level styling
  • none: Hides the element (removed from layout)
  • flex: Turns container into a flexible layout box
  • grid: Turns container into a grid layout

Example: CSS display Property in Action

🚀 Try it in Compiler

Use Cases of Display Values

  • block: Used for structure elements like <div>, <p>, <section>
  • inline: For inline elements like <span>, <a>, <strong>
  • inline-block: When you need inline flow with block styling (e.g., buttons)
  • none: To hide elements dynamically with JavaScript or CSS
  • flex: For responsive horizontal/vertical layouts
  • grid: For two-dimensional layout control (rows and columns)

display: none vs visibility: hidden

  • display: none: Completely removes the element from the document flow
  • visibility: hidden: Hides the element but still takes up space

Key Takeaways

  • The display property defines the layout behavior of elements
  • Use block, inline, inline-block for structural positioning
  • Use none to fully hide an element from the layout
  • Use flex and grid for building complex, responsive designs
  • Mastering display is essential for modern front-end development
Next: CSS Position