Hiding an Element with CSS: Display vs Visibility vs Opacity
Tags: css, thisvsthat
Published: 2023-01-08 21:57:17

---
title: Hiding an Element with CSS: Display vs Visibility vs Opacity
published: true
date: 2021-09-17 12:11:44 UTC
tags: CSS,ThisvsThat
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx9jpfa1wun0jd8a23ef.jpg
canonical_url: https://www.codeentity.tech/hiding-an-element-css/
---

 **CSS** offers various ways to hide elements on a web page, but it’s important to understand the differences between them in order to choose the right one for your specific use case. In this blog post, we will explore the `display: none`, `visibility: hidden`, and `opacity: 0` properties and how they can be used to hide elements.

###### Here’s a quick comparison table:

| Property | Description | Collapses | Events | Tab Order | Animatable |
| --- | --- | --- | --- | --- | --- |
| display: none | Hides an element and takes up no space in the layout | ✅ | ❌ | ❌ | ❌ |
| visibility: hidden | Hides an element but takes up space in the layout | ❌ | ❌ | ❌ | ❌ |
| opacity: 0 | Makes an element fully transparent but still takes up space in the layout | ❌ | ✅ | ✅ | ✅ |

##### display: none

The `display` property determines how an element is displayed on the web page. The none value completely removes the element from the document, including all its children. This means that the element will not take up any space on the page and will not be visible to the user.

```css
.toggle {
  display: none;
}
```

One important thing to note about `display: none` is that it not only hides the element, but it also removes it from the document entirely. This means that any events or interactions associated with the element will no longer work. For example, if the element is a button that triggers an action when clicked, that action will no longer be triggered when the button is hidden using` display: none`.

##### visibility: hidden

Unlike `display: none`, the `visibility: hidden` property does not remove the element from the document. Instead, it only hides the element and leaves empty space where the element would have been.

```css
.toggle {
  visibility: hidden;
}
```

This can be useful in cases where you want to hide an element but still want to preserve its layout and keep its space on the page. For example, if you have a navigation menu with multiple items and you want to hide one of the items temporarily, using `visibility: hidden` will allow you to keep the layout of the menu intact.

##### opacity: 0

The `opacity` property determines the transparency of an element. A value of `0` means that the element is completely transparent and not visible to the user.

```css
.toggle {
  opacity: 0;
}
```

Like `visibility: hidden`, `opacity: 0` does not remove the element from the document. It only makes the element transparent, so it will still take up space on the page and any events or interactions associated with the element will still work.

##### Choosing the right property

When it comes to hiding elements, you should choose the right property based on your specific needs. Here are some general guidelines to help you make the right decision:

- If you want to completely remove the element from the document and change layout, use `display: none`.
- If you want to hide the element but preserve its layout and space on the page, use `visibility: hidden`.
- If you want to hide the element but still allow it to interact with the user, use `opacity: 0`.

It’s important to note that these properties can be used in combination with each other, depending on your needs. For example, you can use `opacity: 0` to make an element transparent and `visibility: hidden` to hide it, or you can use `display: none` to remove an element from the document and `opacity: 0` to make it transparent. This is useful when you are adding a complex animation using keyframes and need to have different behaviors in animation cycle.

##### Conclusion

In conclusion, the `display:none`, `visibility:hidden`, and `opacity:0` CSS properties are all useful for hiding elements on a webpage. `display:none` completely removes the element from the page, while `visibility:hidden` and `opacity:0` only hide the element but still take up space on the page. It’s important to consider which one is most appropriate for the specific situation, as they can affect the layout and functionality of the page in different ways. Understanding and utilizing these properties can help create a more polished and visually appealing website.