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).
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
visibility:hidden
Reset
CSS Display/Visibility Properties #
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |
