html
/

CSS Display

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Display

What is Display?

The display property defines how an element is rendered and how it behaves in the layout.

Block Elements

Block elements take full width and start on a new line.

CSSRead-only
1
div {
  display: block;
}

Inline Elements

Inline elements take only necessary width and stay in the same line.

CSSRead-only
1
span {
  display: inline;
}

Inline-Block

Allows width and height while staying inline.

CSSRead-only
1
div {
  display: inline-block;
}

Display None

Hides the element completely (no space taken).

CSSRead-only
1
div {
  display: none;
}

Flex Display

Used for flexible layouts and alignment.

CSSRead-only
1
div {
  display: flex;
}

Grid Display

Used for two-dimensional layouts.

CSSRead-only
1
div {
  display: grid;
}

Display Values Overview

ValueDescription
blockFull width element
inlineInline element
inline-blockInline with size control
noneHidden element
flexFlexible layout
gridGrid layout

Visibility vs Display

PropertyBehavior
display: noneRemoves element completely
visibility: hiddenHides but keeps space

Best Practices

  • Use flex for one-dimensional layouts
  • Use grid for complex layouts
  • Avoid unnecessary display changes
  • Use inline-block when needed for sizing

Common Mistakes

  • Using inline when width is needed
  • Confusing display and visibility
  • Overusing flex/grid unnecessarily
  • Breaking layout with display none

Conclusion

The display property is fundamental for layout design. Choosing the right display type ensures proper structure and responsiveness.

Try it yourself

div {
  display: flex;
  justify-content: center;
}

Test Your Knowledge

Q1
of 3

Which takes full width?

A
inline
B
block
C
flex
D
grid
Q2
of 3

Which hides element?

A
display: none
B
visibility: hidden
C
opacity: 0
D
all
Q3
of 3

Which is for layout?

A
flex
B
grid
C
both
D
none

Frequently Asked Questions

What does display do?

It defines how an element appears in layout.

Difference between none and hidden?

None removes element, hidden keeps space.

When to use flex?

For flexible layouts and alignment.

Previous

css icons

Next

css position

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.