CSS Layout - The display Property
The display
property is the most important CSS property for controlling layout.
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
This panel contains a <div> element, which is hidden by default (display: none
).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block
).
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:
Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with display: block;
is not allowed
to have other block elements inside it.
The following example displays <span> elements as block elements:
The following example displays <a> elements as block elements:
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)
Hiding an element can be done by setting the display
property to
none
.
The element will be hidden, and the page will be displayed as if the element is not
there:
visibility:hidden;
also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:
More Examples
Differences between display: none; and visibility: hidden;
This example demonstrates display: none; versus visibility: hidden;
Using CSS together with JavaScript to show content
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
Property | Description |
---|---|
display | Specifies how an element should be displayed |
visibility | Specifies whether or not an element should be visible |