Display Property

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Of course, the display property is perhaps the most essential CSS property for a functioning webpage. It describes the way in which an element interacts with the elements around it, as well as describing how it handles its own structure

It defines to the browser that “Render this box as a block, as a line of text, or a complex grid, this is what “css” does”

1. The “Big Two”: Block vs. Inline

CSS starts with the knowledge of the majority of elements have a default state. They are the two defaults.

Block (`display: block;`)

Behavior: Takes up the full width available (stretches to the left and right edges of its container).
Flow: Starts on a new line.
Sizing: You can set a specific width and height.
Examples: <div>, <h1> through <h6>, <p>, <section>.

Inline (`display: inline;`)

Behavior: Takes up only as much width as necessary for its content.
Flow: Does not start on a new line; it sits side-by-side with other inline elements (like words in a sentence).
Sizing: You cannot set a width or height.
Examples: <span>, <a>, <strong>.

2. The Hybrid: Inline-Block

`display: inline-block;`

This is a happy compromise. It allows one element to sit next to others (like inline), but still allows you to set a width, height, and vertical padding/margins (like block).

Usages group: Make a row of buttons for navigation or an image gallery where you need some sizes but want them all to stay on the same line.

3. The Modern Layout Engines

These values changed web design by making complex layouts much easier to build.

Flexbox (`display: flex;`)

Flexbox is designed for one-dimensional layouts—either a single row or a single column.

It is excellent for aligning items (centering them perfectly) and distributing space between them automatically.
Example: A navigation bar where the logo is on the left and links are on the right.

Grid (`display: grid;`)

Grid is designed for two-dimensional layouts—rows and columns at the same time.

It allows you to build complex “magazine-style” layouts with overlapping sections or specific areas for headers, sidebars, and footers.

4. The “Invisible” Value

`display: none;`

This completely removes the element from the page. It’s as if the element doesn’t exist in the HTML at all.

Note: This is different from visibility: hidden;. With none, the space the element would have taken up collapses. With hidden, the element is invisible but the empty “gap” remains.

Summary Table

Value	Starts on new line?	Can set Width/Height?	Main Use Case
Block	Yes	Yes	Structural sections, paragraphs.
Inline	No	No	Styling specific words inside text.
Inline-Block	No	Yes	Buttons or items in a row with specific sizes.
Flex	Yes (usually)	Yes	Aligning items in a row or column.
None	N/A	N/A	Hiding elements (like mobile menus).