CSS Display

The CSS display property is one of the most potent and fundamental properties available to Front-end developers. Simply put, it regulates how things will be displayed on the web page — whether they are a block, inline, flex, grid, etc...

What is the Display Property?

The display attribute in CSS defines the rendering box of an element. It determines how the element is presented in the flow of the document and how it interacts w/ surrounding elements.

Common values of display property

• block: The element takes the full width and starts on a new line
• inline: The element does not include space on the top and bottom, only takes width that the content needs.
• inline-block: Like inline, but allows setting width and height.
• none: Removes the element from the document flow entirely
• flex: Allows use of Flexbox layout - good for keeping things in a row or column.
• grid: Enables CSS Grid layout — great for two-dimensional layouts.
• inline-flex: Flex layout but behaves like an inline element.
• inline-grid: Grid layout but behaves like an inline element.

Examples of Common Display Types

Block Example

          p {
             display: block;
          }

Paragraphs are block-level by default — they start on a new line and stretch across the page.

Inline Example

          span {
             display: inline;
          }

<span> elements are inline by default. They sit within the line of text and don’t break to a new line.

Inline-Block Example

          button  {
              display: inline-block;
              padding: 10px;
          }
     

This allows you to style the element like a block (setting width/height) while keeping it in line with other elements.

None Example

          .hidden {
              display: none;
          }

This hides the element completely. It won't take up any space in your layout.

Flex Example

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

This creates a flex container. Its children can now be easily aligned and spaced.

Grid Example

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

This sets up a grid layout with three equally spaced columns.

Why the Display Property Matters

• It affects element flow and layout behavior.
• It allows for advanced responsive designs with Flexbox and Grid.
• It can be used to hide or show elements based on logic or media queries.
• It determines how margin, padding, and other properties interact.

Best Practices for Using Display

• Use flex or grid for layout management.
• Use inline-block when you need layout control within a text line.
• Avoid overusing display: none for SEO-critical content — it may be ignored by crawlers.
• Combine display with media queries for responsive designs.

Conclusion

The CSS display property is the most basic specification in CSS doesn't mean it isn't where complex layout control and flexible and responsive design starts. Whether you're trying to layout a single page or a multi-column layout, learning display means you are learning the core of modern web design. If you are a passionate web developer, and want to know how elements will interact and behave in your layout, then you have taken the first step to build better users experiences for your audience.