CSS Display Property Tutorial

The CSS display property defines how an HTML element is displayed on a webpage. It controls whether an element behaves like a block element, inline element, or other layout type.

Understanding the display property is essential for controlling layout and structure in web development.

Different display values determine how elements occupy space, align with other elements, and respond to layout rules.

Some of the most commonly used display values are block, inline, inline-block, and none.

Block Elements

Block elements take up the full width of the container and start on a new line.

Common block elements include div, p, and h1.

              
CSS

          Block Display Example
        
div {
  display: block;
}

Each block element appears on a separate line.

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

Common inline elements include span, a, and strong.

              
CSS

          Inline Display Example
        
span {
  display: inline;
}

Inline elements appear next to each other on the same line.

Inline-Block Elements

Inline-block elements behave like inline elements but allow width and height to be set.

This display type is useful for creating horizontal layouts while maintaining block-like control.

              
            
CSS

          Inline-Block Example
        
.box {
  display: inline-block;
  width: 200px;
  height: 100px;
}

Display None

The display: none property completely removes an element from the layout.

The element will not appear on the page and will not occupy any space.

              
CSS

          Display None Example
        
.hidden {
  display: none;
}

Modern Display Values

Modern layouts often use display values like flex and grid.

display: flex for flexible layouts
display: grid for grid-based layouts

These layout systems provide more advanced positioning and alignment features.

Display Property Example

              
            
CSS

          Display Example
        
.container {
  display: flex;
}

.item {
  display: inline-block;
  margin: 10px;
}

Best Practices

Use block elements for structural layout.
Use inline elements for text formatting.
Use inline-block when width and height control is needed.
Use display none carefully when hiding elements.
Use flex and grid for modern responsive layouts.

Conclusion

The CSS display property is a fundamental part of web design that controls how elements behave within a webpage layout.

By understanding block, inline, inline-block, and none, developers can create well-structured and flexible layouts.

Combined with modern layout systems like Flexbox and Grid, the display property enables powerful and responsive web designs.