CSS display

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).

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,