---
title: CSS display
description: "--- ## The display Property 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`. Click to show panel…"
url: "https://apprentice.mn/docs/css-display-2/"
updated: "2021-05-10"
category: CSS
---

# CSS display

---

## The display Property

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

Click to show panel

## 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 with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

The `<script>` element uses `display: none;` as default. 

## Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

A common example is making inline `<li>` elements for horizontal menus:

       `li {
  display: inline;
}`

The following example displays <span> elements as block elements:

     `span {
  display: block;
}`

The following example displays <a> elements as block elements:

     `a {
  display: block;
}`

## Hide an Element – display:none or visibility:hidden?

`display:none`

 ![Italy](img_5terre.jpg)

`visibility:hidden`

 ![Forest](img_forest.jpg)

Reset

 ![Lights](img_lights.jpg)

## CSS Display/Visibility Properties

| Property | Description |
| --- | --- |
| [display](https://www.w3schools.com/cssref/pr_class_display.asp) | Specifies how an element should be displayed |
| [visibility](https://www.w3schools.com/cssref/pr_class_visibility.asp) | Specifies whether or not an element should be visible |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-display-2%2F&linkname=CSS%20display)[https://www.addtoany.com/share](https://www.addtoany.com/share)