CSS display


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.


Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; is commonly used in responsive web design to adjust the layout to every possible devices (desktops, tablets, mobile).

A very typical case is the hiding on mobile devices of such items that only on large screens are able to display properly.

Decrease the size of the browser window to below 768px, and then the example below will disappear:

I will disappear if you reduce the browser window size below 768px.

Note: This use of the display property requires the use of so-called media queries. You will learn about them in future tutorials,


Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.