Web Analytics
☕ Coffee 𝕏 Follow
0%

The Display Property

Beginner ~10 min read

What is Display?

The display property controls how an element behaves in the document flow. It's one of the most important CSS properties for layout.

Display: Block

Block elements take up the full width available and start on a new line. Examples: <div>, <p>, <h1>.

HTML
CSS
JS

Display: Inline

Inline elements only take up as much width as needed and don't start on a new line. Width and height have no effect. Examples: <span>, <a>, <strong>.

HTML
CSS
JS

Display: Inline-Block

Inline-block combines both behaviors: elements flow inline but respect width and height. Perfect for creating horizontal layouts!

HTML
CSS
JS

Display: None

display: none completely removes the element from the page. It takes up no space.

HTML
CSS
JS

Changing Default Display

You can change an element's default display behavior. For example, make a <span> behave like a block element.

HTML
CSS
JS
Quick Reference:
• block - Full width, new line
• inline - Content width, same line
• inline-block - Content width, same line, respects width/height
• none - Hidden, no space

Common Use Cases

  • Navigation menus - Use inline-block for horizontal menu items
  • Image galleries - Use inline-block for side-by-side images
  • Hide elements - Use display: none for mobile menus, modals
  • Button groups - Use inline-block for buttons in a row

Quick Quiz

Which display value allows elements to sit side-by-side AND respect width/height?

A
block
B
inline
C
inline-block
D
none
Previous Width & Height
Next Position