---
title: "What is the difference between display: none; and visibility: hidden; in CSS?"  
description: "What is the difference between display: none; and visibility: hidden; in CSS?"  
author: "Ashutosh Patel"  
published: 2024-10-21  
updated: 2024-10-21  
canonical: https://www.mindstick.com/interview/33981/what-is-the-difference-between-display-none-and-visibility-hidden-in-css  
category: "css-css3"  
tags: ["css-css3", "css", "css styling"]  
reading_time: 2 minutes  

---

# What is the difference between display: none; and visibility: hidden; in CSS?

`display: none;` removes an element from the document layout completely. The element appears to not exist, so it takes up no space on the page, and other elements will be placed as if the hidden element were not there.

## Example-

```css
.hidden-element {
	display: none; /* Element will not appear, and no space will be reserved */
}
```

`visibility: hidden;` hides the element from view but still keeps it in the document layout. This means that the element occupies space on the page as if it were visible, but it is not displayed. The difference lies in the fact that display: none; affects the layout, while visibility: hidden; does not.

## Example-

```css
.invisible-element {
	visibility: hidden; /* Element will be hidden, but space will be reserved */
}
```

## Answers

### Answer by Ashutosh Patel

`display: none;` removes an element from the document layout completely. The element appears to not exist, so it takes up no space on the page, and other elements will be placed as if the hidden element were not there.

## Example-

```css
.hidden-element {
	display: none; /* Element will not appear, and no space will be reserved */
}
```

`visibility: hidden;` hides the element from view but still keeps it in the document layout. This means that the element occupies space on the page as if it were visible, but it is not displayed. The difference lies in the fact that display: none; affects the layout, while visibility: hidden; does not.

## Example-

```css
.invisible-element {
	visibility: hidden; /* Element will be hidden, but space will be reserved */
}
```


---

Original Source: https://www.mindstick.com/interview/33981/what-is-the-difference-between-display-none-and-visibility-hidden-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.