CSS Display Property: A Beginner-Friendly Guide

INTRODUCTION

When building websites with HTML and CSS, controlling how elements appear on a page is essential. The CSS display property determines how an HTML element participates in the layout and how it is positioned relative to other elements.

Whether you are creating a simple webpage, navigation menu, card layout, or responsive interface, understanding the display property is an important part of learning CSS.

What Is the CSS Display Property?

The display property specifies how an element should be rendered and how it should behave within the page layout.

The basic syntax is:

selector {
display: value;
}

For example:

div {
display: block;
}

CSS provides several display values, including:

block
inline
inline-block
none
flex
inline-flex
grid
table

Each value changes the way an element interacts with the surrounding content.

1. display: block

A block-level element normally starts on a new line and takes up the available horizontal space.

Common block-level elements include

,

, and headings.

.box {
display: block;
}

Example:

First Box Second Box

The two elements will generally appear one below the other.

Block display is useful when you want elements to occupy their own rows in a layout.

2. display: inline

An inline element does not normally start on a new line. It takes only the space required by its content.

For example:

span {
display: inline;
}

HTML:

Hello
World

The content can appear on the same line.

Elements such as , , and commonly behave as inline elements by default.

3. display: inline-block

inline-block combines characteristics of both inline and block elements.

The element can appear alongside other elements on the same line, while still allowing you to control properties such as width and height.

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

This can be useful for creating simple horizontal layouts, buttons, cards, and navigation components.

4. display: none

The none value removes an element from the page's layout.

.hidden {
display: none;
}

For example:

This paragraph is visible.

This paragraph is hidden.

The hidden paragraph does not occupy space in the layout.

display: none is commonly used for menus, expandable sections, modals, and content that needs to be shown or hidden dynamically.

5. display: flex

Flexbox is one of the most useful modern CSS layout techniques.

By applying:

.container {
display: flex;
}

An element becomes a flex container, and its child elements become flex items.

For example:

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

Flexbox makes it easier to align and distribute elements horizontally or vertically.

6. display: grid

CSS Grid provides a powerful way to create two-dimensional layouts.

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

This can create a layout containing three equal columns.

Grid is particularly useful for dashboards, galleries, product cards, and other structured layouts.

7. Other Display Values

CSS also supports values such as:

inline-flex
inline-grid
table
table-row
table-cell
list-item

These values allow developers to control layouts for different design requirements.

Why Is the Display Property Important?

The display property is important because it directly affects how elements participate in a webpage's layout.

For example:

.navigation {
display: flex;
}

can turn a group of navigation items into a flexible horizontal layout.

Similarly:

.mobile-menu {
display: none;
}

can hide a menu until it needs to be displayed.

Understanding these values helps developers create cleaner, more responsive, and easier-to-maintain websites.

Conclusion

The CSS display property is a fundamental part of webpage layout. Values such as block, inline, and inline-block help control basic element behavior, while flex and grid provide more powerful modern layout options.

For beginners, understanding the difference between these display values is a great step toward creating well-structured and responsive web pages.

For more examples and a detailed explanation of CSS display values, you can explore the CSS Display tutorial on TPointTech.